Styjun

I am trying to plot a heatmap on Google Maps using the API. On using a hardcoded array of LatLng objects, the rendering works. However, if I then try to remove the hardcoded array and generate the array using a for loop, the rendering fails.

console.log for the 2 array variables give me the same objects.

The js-fiddle is provided here: https://jsfiddle.net/arpanio/7weomu5g/61/

The 2 variables are:

• Hardcoded array: heatmapData


• Generated array: heatmap_data

Please see line 87 and line 88 where I comment out and switch between the 2 variables. The hardcoded option works. The generated array option does not work. I am printing both to console and I don't see any difference in the object (other than actual values of the latitude and longitude).

The js code is reproduced below:

var map;
var service;
var infowindow;

function initMap() 
 var sydney = new google.maps.LatLng(45.76404, 4.83565);

 infowindow = new google.maps.InfoWindow();

 map = new google.maps.Map(
 document.getElementById('map'), center: sydney, zoom: 12);
var heatmapData = [
new google.maps.LatLng(45.7523537999999,4.8405),
new google.maps.LatLng(45.7663606,4.8328),
new google.maps.LatLng(45.7603967,4.8557)
];

console.log(heatmapData);

//Data to be obtained from mymap -> KML -> GeoJSON
geo_json = 
 "type":"FeatureCollection",
 "name":"merged",
 "crs": 
 "type":"name",
 "properties": 
 "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
 
 ,
 "features":[ 
 
 "type":"Feature",
 "properties": 
 "Name":"Auchan Drive Lyon Saint Priest"
 ,
 "geometry": 
 "type":"Point",
 "coordinates":[ 
 4.9252405,
 45.7235401
 ]
 
 ,
 
 "type":"Feature",
 "properties": 
 "Name":"Auchan Drive Saint Genis (Chapônost)"
 ,
 "geometry": 
 "type":"Point",
 "coordinates":[ 
 4.76585360000001,
 45.6992269
 ]
 
 ,
 
 "type":"Feature",
 "properties": 
 "Name":"Auchan"
 ,
 "geometry": 
 "type":"Point",
 "coordinates":[ 
 4.8008698,
 45.7498202
 ]
 
 
 ]
;

//Convert GeoJSON to Google-specific heatmap data
var heatmap_data = [];
for(var i = 0; i < geo_json.features.length; i++) 
 var temp = geo_json.features[i].geometry.coordinates;
 heatmap_data.push(new google.maps.LatLng(temp[0], temp[1]));
 //console.log(temp);
 /* var lat_lng = new google.maps.LatLng(temp[0], temp[1]);
 heatmap_data.push(lat_lng); */

console.log(heatmap_data);


var heatmap = new google.maps.visualization.HeatmapLayer(
 /* Problem here */
 data: heatmapData, //This works
 //data: heatmap_data, //This does not
 radius: 50,
 opacity: 0.4
);
heatmap.setMap(map);

 var request = 
 location: sydney,
 radius: '500',
 query: 'Carrefour'
 ;

 service = new google.maps.places.PlacesService(map);

 service.textSearch(request, function(results, status) 
 console.log(results);
 if (status === google.maps.places.PlacesServiceStatus.OK) 
 for (var i = 0; i < results.length; i++) 
 createMarker(results[i]);
 //console.log(JSON.stringify(results[i].geometry.location)); 
 

 map.setCenter(results[0].geometry.location);
 


 );


function createMarker(place) 
 var marker = new google.maps.Marker(
 map: map,
 icon: 
 path: google.maps.SymbolPath.CIRCLE,
 scale: 2
 ,
 position: place.geometry.location
 );

 google.maps.event.addListener(marker, 'click', function() 
 infowindow.setContent(place.name);
 infowindow.open(map, this);
 );

Change co-ordinates sequence of temp variable -

heatmap_data.push(new google.maps.LatLng(temp[0], temp[1]));

to

heatmap_data.push(new google.maps.LatLng(temp[1], temp[0]));

Working JSFiddle - https://jsfiddle.net/hL7n2fek/

Your heatmap is getting generated, but with hardcoded heatmapData the co-ordinates are
45.7523537999999,4.8405 which points to somewhere in France and your google map is initialized nearby to same co-ordinates.

But in your geometry property in geo_json object, the co-ordinates are specified as [4.9252405, 45.7235401] which points to location
somewhere in Somalia. Your google map visible section does not covers this. If you zoom in more, you can see that it is getting generated.

GeoJson specifies the coordinates in the order [Longitude, Latitude].

So, this code:

heatmap_data.push(new google.maps.LatLng(temp[0], temp[1])); // temp[0] (is Longitude), temp[1] (is Latitude)

should be:

heatmap_data.push(new google.maps.LatLng(temp[1], temp[0])); // temp[1] (is Latitude), temp[1] (is Longitude)

updated fiddle

code snippet:

var map;
var service;
var infowindow;

function initMap() 
 var sydney = new google.maps.LatLng(45.76404, 4.83565);

 infowindow = new google.maps.InfoWindow();

 map = new google.maps.Map(
 document.getElementById('map'), 
 center: sydney,
 zoom: 12
 );
 var heatmapData = [
 new google.maps.LatLng(45.7523537999999, 4.8405),
 new google.maps.LatLng(45.7663606, 4.8328),
 new google.maps.LatLng(45.7603967, 4.8557)
 ];

 console.log(heatmapData);

 //Data to be obtained from mymap -> KML -> GeoJSON
 geo_json = 
 "type": "FeatureCollection",
 "name": "merged",
 "crs": 
 "type": "name",
 "properties": 
 "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
 
 ,
 "features": [
 "type": "Feature",
 "properties": 
 "Name": "Auchan Drive Lyon Saint Priest"
 ,
 "geometry": 
 "type": "Point",
 "coordinates": [
 4.8405,
 45.7523537999999
 ]
 
 ,
 
 "type": "Feature",
 "properties": 
 "Name": "Auchan Drive Saint Genis (Chapônost)"
 ,
 "geometry": 
 "type": "Point",
 "coordinates": [
 4.8328,
 45.7663606
 ]
 
 ,
 
 "type": "Feature",
 "properties": 
 "Name": "Auchan"
 ,
 "geometry": 
 "type": "Point",
 "coordinates": [
 4.8557,
 45.7603967
 ]
 
 
 ]
 ;

 //Convert GeoJSON to Google-specific heatmap data
 var heatmap_data = [];
 for (var i = 0; i < geo_json.features.length; i++) 
 var temp = geo_json.features[i].geometry.coordinates;
 // heatmap_data.push(new google.maps.LatLng(temp[0], temp[1]));
 console.log(temp);
 var lat_lng = new google.maps.LatLng(temp[1], temp[0]);
 heatmap_data.push(lat_lng);
 
 console.log(heatmap_data);


 var heatmap = new google.maps.visualization.HeatmapLayer(
 /* Problem here */
 // data: heatmapData, //This works
 data: heatmap_data, //This does not
 radius: 50,
 opacity: 0.4
 );
 heatmap.setMap(map);

 var request = 
 location: sydney,
 radius: '500',
 query: 'Carrefour'
 ;

 service = new google.maps.places.PlacesService(map);

 service.textSearch(request, function(results, status) 
 console.log(results);
 if (status === google.maps.places.PlacesServiceStatus.OK) 
 for (var i = 0; i < results.length; i++) 
 createMarker(results[i]);
 //console.log(JSON.stringify(results[i].geometry.location)); 
 

 map.setCenter(results[0].geometry.location);
 


 );


function createMarker(place) 
 var marker = new google.maps.Marker(
 map: map,
 icon: 
 path: google.maps.SymbolPath.CIRCLE,
 scale: 2
 ,
 position: place.geometry.location
 );

 google.maps.event.addListener(marker, 'click', function() 
 infowindow.setContent(place.name);
 infowindow.open(map, this);
 );

html,
body,
#map 
 height: 100%;
 margin: 0;
 padding: 0;

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places,visualization&callback=initMap" async defer></script>