Right, I got this.
Did try your code. But it didn't work. Did a few editing by myself and still can not seem to get it working.
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>
<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?sensor=true&libraries=visualization"></script>
<script type="text/javascript">
var heatMapData=[]//empty array to store objects
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(21.1438, 79.0926),
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 < markers.length; i++) { //loop through nodes getting info
var int = markers[i].getAttribute("intensity");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var hObj = { //create object
location: point,
weight: int
}
heatMapData.push(hObj); //push object onto array
}
}
pointArray = new google.maps.MVCArray(heatMapData); //convert array to MVC array
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
}); //create heat map object
heatmap.setMap(map); //display heat map on 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);
}
function doNothing() {}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>