title: Google Maps API HeatMap Layer : Using AJAX/PHP/MySQL Server Side Data for 'heatmap'
body: <p>I am trying to create a heatmap layer over Google Maps API based on some data I have. This is based on Google Maps API v3 documentation:</p>
  
  <p><a href="https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps" rel="nofollow">https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps</a></p>
  
  <p>The problem is if I have to add new data, I have to write it within the code itself. The latitude, longitude and the weight. I have managed to import XML output from PHP into the JavaScript for another purpose and I think this can be done for heatmap layer also. However, my code is simply not working fully. The layer is not getting displayed, only the Map is coming. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Google Maps JavaScript API v3 Example: Heatmap Layer&lt;/title&gt;
  &lt;link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?
  v=3.exp&amp;sensor=false&amp;libraries=visualization"&gt;&lt;/script&gt;
  &lt;script&gt;
  // var map, pointarray, heatmap;
  var heatMapData = [];
  
  function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(23.2500, 87.8500),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
       };
  
      var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
  
  
   downloadUrl("phpsqlajax_genxml_heatmap.php", function(data) {
         var xml = data.responseXML;
         var markers = xml.documentElement.getElementsByTagName("marker");
   for (var i = 0; i &lt; markers.length; i++) { //loop through nodes getting info
      var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
      var intensity = markers[i].getAttribute("intensity");
   var hObj = { //create object
    location: point,
    weight: intensity
   }
   heatMapData.push(hObj); //push object onto array  
  
   }
   });
  
      //pointArray = new google.maps.MVCArray(heatMapData);
  
      var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatMapData,
      dissipating: true,
      radius: 150,
      maxIntensity: 200
      });
  
      heatmap.setMap(map);
    }
  
  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
  
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };
  
    request.open('GET', url, true);
    request.send(null);
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  &lt;div id="map_canvas" style="height: 600px; width: 800px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have used Google's reference for importing XMP from PHP into JavaScript:</p>
  
  <p>Could somone help me out?</p>
  
  <p>Thanks in advance...</p>