[SOLVED] Display GoogleMaps webpage in HabPanel "not a LatLng or LatLngLiteral with finite coordinates"

Apps & Services HABPanel
1

2019-09-24: completely edited as I made some progress …

I’m trying to display google maps with a coordinate path.

I get the following error:

[Error] InvalidValueError: at index 0: not a LatLng or LatLngLiteral with finite coordinates: not an Object

HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 22,
          center: {lat: xx.xxx, lng: y.yyy,
          mapTypeId: 'satellite'
        });

	var flightPlanCoordinatesData = new XMLHttpRequest();
	flightPlanCoordinatesData.open( "GET", "https://1mylocalIP:port/rest/items/HusqvarnaMowerMapArrayDay/state" , false );
	flightPlanCoordinatesData.send( null );
	console.log(flightPlanCoordinatesData.responseText);
	var flightPlanCoordinatesVariable = flightPlanCoordinatesData.responseText;

        var flightPlanCoordinates = [
	  flightPlanCoordinatesVariable
	];

        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap">
    </script>
  </body>
</html>

Console output from “console.log(flightPlanCoordinatesData.responseText);” (values changed)

{lat: 99.999999, lng: 9.999999},{lat: 98.999999, lng: 8.999999},{lat: 97.999999, lng: 7.999999}

If I put the console output directly in the html script, the path is displayed correctly:

        var flightPlanCoordinates = [
{lat: 99.999999, lng: 9.999999},{lat: 98.999999, lng: 8.999999},{lat: 97.999999, lng: 7.999999}
	];

Unfortunately, I don’t have enough html knowledge to fix the latest piece of work, could someone help me ?

2

Hi,
This is not really “openhab related”…anyway at first glance it seems like there is a problematic line

center: {lat: xx.xxx, lng: y.yyy,

First you need to pass some value there, cannot be “xx.xxx” “y.yyy” , second you are missing one closing “}” before the comma at the end of the line.

Hope it helps.

3

Thanks, but I just replaced the real values with placeholders as I don’t provide my home location here :wink: Then I also removed the } at the end by mistake.

Indeed it’s not fully openhab related, but you can use it in HABPanel to display maps for location tracking or as in my case to check where on your area the mower is doing his job.

But I think I know how to fix my issue:

the “flightPlanCoordinatesVariable” variable needs this format:

var flightPlanCoordinatesVariable = [{lat:parseFloat(xx.xxxxx), lng:parseFloat(y.yyyyyy)},{lat:parseFloat(xx.xxxxx), lng:parseFloat(y.yyyyyy)},{lat:parseFloat(xx.xxxxx), lng:parseFloat(y.yyyyyy)}];

and the following variable has to slighliy adjusted (remove “[” and “]”)

var flightPlanCoordinates =
  flightPlanCoordinatesVariable
;

Means I have to adjust the openhab item “HusqvarnaMowerMapArrayDay” (which is easy btw.)
old:

{lat: xx.xxxxx, lng: y.yyyyyy},{lat: xx.xxxxx, lng: y.yyyyyy}, {lat: xx.xxxxx, lng: y.yyyyyy}, {lat: xx.xxxxx, lng: y.yyyyyy}

new:

[{"lat": xx.xxxxxxx, "lng": y.yyyyyy},{"lat": xx.xxxxxxx, "lng": y.yyyyyy},{"lat": xx.xxxxxxx, "lng": y.yyyyyy}]

Will test that and provide the solution here.

4

Here is the working html code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Mower Path</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 22,
          center: {lat: xx.xxxxxx, lng: y.yyyyyy},  // enter here your center location
          mapTypeId: 'satellite'
        });

	var mowerWayCoordinatesData = new XMLHttpRequest();
	mowerWayCoordinatesData.open( "GET", "../rest/items/HusqvarnaMowerMapArrayDay/state" , false );
	mowerWayCoordinatesData.send( null );

	var resultArray = JSON.parse(mowerWayCoordinatesData.responseText);
	var mowerWayCoordinates = [];
	for (var i=0; i<resultArray.length; i++) {
		mowerWayCoordinates[i] = new google.maps.LatLng(resultArray[i].lat, resultArray[i].lng);
	}

        var flightPath = new google.maps.Polyline({
          path: mowerWayCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap">
    </script>
  </body>
</html>

the item value from “HusqvarnaMowerMapArrayDay” has the following format:

[{"lat": xx.xxxxxxx, "lng": y.yyyyyy},{"lat": xx.xxxxxxx, "lng": y.yyyyyy},{"lat": xx.xxxxxxx, "lng": y.yyyyyy}]
5

And here’s an example screenshot:

Screenshot
Screenshot.jpg1154×1206 363 KB