Display heatmaps Google Maps api does not work

Question

I have this html file:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvAngRk5ZYPJYFhDNzHqJS1Nqf0SYPBgM&libraries=visualization">
    </script>
    <script type="text/javascript">
        var markers = [];
        var points = [];
        var heatPoints = [];
        var map;
        var heatmap;
      function initialize() {
        var myCenter = new google.maps.LatLng(-27.495471, 153.012198)
        var mapOptions = {
          center: myCenter,
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP  
            };

         map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        var tilesloaded=true;
        google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
            if(tilesloaded ==true){
             window.alert();
             tilesloaded=false;
            }
        });
        heatmap = new google.maps.visualization.HeatmapLayer({
                data: heatPoints,
                radius : document.getElementById('map_canvas').offsetHeight / 10;
                map:map
            });
      }
     document.addPoint = function addPoint(info){
         var array = info.split(',');
         var a = array[0], b = array[1], c = array[2], d = array[3], e = array[4];
         var content = "Latitude: " + a + " ** Longitude: " + b + " ** Wind: " + c + " ** Temp: " + d + " ** Light: " + e;
         var lat = parseFloat(a);
         var longi = parseFloat(b);
         var wind = parseFloat(c);
         var temp = parseInt(d);
         var light = parseFloat(e);
         points.push({ "lat": lat, "lng": longi, "temp": temp, "light": light, "wind": wind });
         var marker = new google.maps.Marker({
                draggable: false,
                animation: google.maps.Animation.DROP,
                position: new google.maps.LatLng(lat, longi),
                map: map
            });
        var infowindow = new google.maps.InfoWindow({
          content: content
        }); 
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
         markers.push(marker);
     }
    document.displayHeatmap = function displayHeatmap(measurement) {
            var setHeatmap = (property => heatmap.setData(points.map(x => ({ location: new google.maps.LatLng(x.lat, x.lng), weight: x[property] }))));
            if (measurement === "none") {
                heatmap.setData([]);
            } else {
                setHeatmap(measurement);
            }
        }
     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body> 
</html>

In my web engine, i use the function addPoint to pass data in and display it as a heatmaps ( depends on the parameter passing in displayHeatmap method : none, temp, wind, light)

engine.executeScript("document.addPoint('-27.49,153,11.2,27,1102')");
engine.executeScript("document.addPoint('-27.488,153.109,15.2,26,1105')");
engine.executeScript("document.addPoint('-27.487,153.111,13.4,28,1106')");
engine.executeScript("document.addPoint('-27.491,153.108,14.5,29,1109')");
engine.executeScript("document.addPoint('-27.492,153.112,11.5,26,1111')");
engine.executeScript("document.displayHeatmap('temp')");

Function addPoint has been tested (my program runs fine without the heatmaps)

What are the problems with my javascirpt?

Any pointers will help

Answer 1

Should the map look like this?

If yes, I see the only problem with your code. A comma should be at the end of this string

radius : document.getElementById('map_canvas').offsetHeight / 10;

Like this

data: heatPoints,
radius: document.getElementById('map_canvas').offsetHeight / 10,
map: map

Display heatmaps Google Maps api does not work

Question

1 answers

solution1
0 2016-10-22 13:27:59

Display heatmaps Google Maps api does not work

Question

1 answers

solution1 0 2016-10-22 13:27:59

solution1
0 2016-10-22 13:27:59