Google Maps API - heatmap not defined (map displaying but cannot alter)

Question

On 2nd version of a heatmapping system I am making using google maps api.

Initial version works fine but uses PHP and MySQL to write the points into the map, this displays fine and can then alter map (e.g. radius / opacity) using heatmap.set the only problem is you cant change heatmap displayed without reloading (points are effectively hard coded into script by PHP).

So I have altered original code to instead call a php script (using a serialized version of form) which returns query in JSON format, this works fine in as far as get a blank map to begin with, can choose some settings and it will load heatmap fine, can change these and it will do a new heatmap (which it layers on top of old one) so have gone through how to remove previous heatmap and hit a brick wall...

If I try any function calling heatmap. I get "heatmap not defined" this includes all the previous functions that worked fine in old map.

Full code is quite large so will hopefully cover everything in these snippets...

Initial map load...

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: {lat: 51.514898, lng: -0.144432},
      mapTypeId: 'roadmap'
    });
  }

Make a heatmap...

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    var heatmapData = [];
    myObj = JSON.parse(this.responseText);
    for (var i = 0; i < myObj.points.length; i++) {
    var latLng = new google.maps.LatLng(myObj.points[i].lat,myObj.points[i].lng);
    var pushData = {
            location: latLng,
            weight: myObj.points[i].weight
    }
    heatmapData.push(pushData);
    }
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData,
  maxIntensity: 10,
  radius:30,
  opacity: 0.4,
  map: map
})
}
};

Which is called by form submit...

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  url = "query.php?" + $( this ).serialize();
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
});

and an example function which don't work (value set by a slider with an onchange event)...

  function changeOp(val) {
    heatmap.set('opacity', val);
  }

geocodezip geocodezip · Accepted Answer · 2017-01-27T22:16:08

The heatmap is currently local to the xmlhttp.onreadystatechange function, you can't access it outside of there. You need to declare it outside of that function (the global scope works, like the map variable), then you can access it to modify it later (or in the next call to the AJAX request).

var heatmap;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var heatmapData = [];
    myObj = JSON.parse(this.responseText);
    for (var i = 0; i < myObj.points.length; i++) {
      var latLng = new google.maps.LatLng(myObj.points[i].lat, myObj.points[i].lng);
      var pushData = {
        location: latLng,
        weight: myObj.points[i].weight
      }
      heatmapData.push(pushData);
    }
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      maxIntensity: 10,
      radius: 30,
      opacity: 0.4,
      map: map
    })
  }
};

Google Maps API - heatmap not defined (map displaying but cannot alter)

1 Answers