There is documentation for the heatmap layer. In that, instead of merely adding Latitude and Longitude, there is option to add an intensity value too , the latter making the heatmap areas red where intensity is high and green where it is low...This can be given as shown below (like it is in documentation. The example is shown below) :-
Code:
var heatMapData = [
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
new google.maps.LatLng(37.782, -122.445),
{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
new google.maps.LatLng(37.782, -122.437),
{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
new google.maps.LatLng(37.785, -122.443),
{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
new google.maps.LatLng(37.785, -122.439),
{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
{location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];
Now, I have an XML file which contains latitude,longitude and intensity values. The PHP code that generates this XML file is :-
Code:
<?php
error_reporting(E_PARSE);
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysql_connect ("localhost","root","mysqlegregious");
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db("googlemaps");
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'intensity="' . $row['intensity'] . '" ';
echo '/>';
}
I am totally new to JavaScript, but has a grip on PHP and MySQL.
As you can see from the first code, the heatmap generation is via client side through JavaScript. I want it to be more flexible and dynamic so that the Javascript values in the SECOND code that I posted can be imported from the XML data that I generated through MySQL. Is it possible?
yes, it's very possible. You make an ajax call to retrieve the xml file then iterate through the nodes, building your array.
google made a little tutorial that does more or less what you are trying to do - dunno if you have seen it. It's here
Yes, I have seen that already and tested it. It's working.
But here , I want to import XML data as a MVC array like the one shown in the first code. Then it can be easily made into a heatmap layer. I am new to the scripting of JavaScript and that is why I am confused...
I don't know if I'm getting the difference - you import your data via ajax, create the objects, push them onto an array and initialize it as an MVC array. That last bit's easy:
I don't know if I'm getting the difference - you import your data via ajax, create the objects, push them onto an array and initialize it as an MVC array. That last bit's easy:
Code:
pointArray = new google.maps.MVCArray(taxiData);
what specifically are you getting confused about?
I am not confused about the script of the first code. The first code is just an example and as such it is not what I want.
I want an XML data generated by my PHP code to get incorporated into the array of 'taxidata' so that it offers me a much more dynamic choice.
Otherwise, I would have to type in the various Lat and Long positions myself in the JavaScript.
I want this 'lat', 'long','intensity' to be incorported into the first code (that is, instead of the example data of the taxidata array, I want my XML data to be part of it) so that it's more dynamic.
In that taxidata example, there is only the Lat and Long options. But Google documentation says that it's possible to include an additional variable of intensity in it too. That intensity value is there in my XML data.
right. so if your code is how I imagine it, and if you have an empty heatMapData array to push objects onto, wouldn't it be something like this:
Code:
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var int = markers[i].getAttribute("intensity");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var hObj = {
location: point,
weight: int
}
heatMapData.push(hObj);
}
right. so if your code is how I imagine it, and if you have an empty heatMapData array to push objects onto, wouldn't it be something like this:
Code:
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var int = markers[i].getAttribute("intensity");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var hObj = {
location: point,
weight: int
}
heatMapData.push(hObj);
}
Yes, exactly.
The example given in Google Maps API documentation is given below :-
Code:
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
new google.maps.LatLng(37.782, -122.445),
{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
new google.maps.LatLng(37.782, -122.437),
{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
new google.maps.LatLng(37.785, -122.443),
{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
new google.maps.LatLng(37.785, -122.439),
{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
{location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatmap.setMap(map);
As you can see, they have entered 'data' in variable heatmap as 'heatMapData', which in our case , would be 'hObj' , I presume.
I think not. hObj is just a name for the objects getting pushed onto the array.
If you look, google passes the entire array to the HeatmapLayer object, so I am thinking that in your case it would be:
Code:
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatmap.setMap(map);
as well
I am not sure. Because in the Google example, the array name is heatMapData.
In this case, our data is of latitude and longitude is in the variable named 'hObj'.
By the way, I tried this code and it didn't work :-
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 { height: 100%;
float:right; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(21.1438, 79.0926),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var hObj = {
point
}
}
}
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var heatmap = new google.maps.visualization.HeatmapLayer({
data: hObj
});
heatmap.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="height: 600px; width: 800px;"></div>
</body>
</html>
You're not listening. hObj is just an object, and every time the loop iterates it gets overwritten. That's why you need to push it onto an array (inside the loop) and then pass the array to the heatMapLayer (outside the loop).
I would try this:
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 { height: 100%;
float:right; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&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.SATELLITE
};
downloadUrl("phpsqlajax_genxml.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
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="height: 600px; width: 800px;"></div>
</body>
</html>
I think it might be time to see a link to your map
Well, I am getting the Google Map image. There were a few syntax errors in the original code. I corrected them. But still the heatmap layer is not coming over the Map image.
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 src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script type="text/javascript">
var heatMapData=[];//empty array to store objects
var pointArray;
var heatmap;
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() {}
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 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); //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 toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.setOptions({
gradient: heatmap.get('gradient') ? null : gradient
});
}
function changeRadius() {
heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
}
function changeOpacity() {
heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 600px; width: 800px;">
</div>
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</body>
</html>
Before you post, read our: 
