I have been working on integrating the Google Maps JavaScript API and attempting to update a heat map when a user clicks on a specific div element. The latitude and longitude data used for the heatmap are fetched from local JSON files. While I have successfully loaded the web page with the map and heatmap overlay displaying correctly, I encountered an issue when trying to update the heatmap data upon clicking a div – the heatmap simply disappears.
Upon debugging, I found that the $.ajax call within my getPoints(file) function is skipped whenever I invoke getPoints(file) in my onclick listener. Could anyone provide insight into what might be causing this issue? Below is the code snippet:
var map, heatmap;
function initMap() {
var sanFran = {
lat: 37.775299,
lng: -122.432432
}
map = new google.maps.Map(document.getElementById('Map'), {
zoom: 10,
center: sanFran,
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints("2016-07-02--11-56-24.json"),
map: map
});
};
function getPoints(file) {
retArr = [];
var weblink = "http://localhost:8080/trips/" + file;
$.ajax({
url: weblink,
dataType: "json",
success: function(data) {
for (var i = 0; i < data.coords.length; i++) {
console.log(data.coords[i]);
retArr.push(new google.maps.LatLng(data.coords[i].lat, data.coords[i].lng))
}
}
});
return retArr;
}
$.each(jsTrips, function(k, v) {
$("#" + k).on("click", function() {
heatmap.set('data', getPoints(v));
})
})
The JSON data structure is as follows:
{
"start_time": some time,
"coords": [{lat, long}, {lat, long}, {lat, long}],
"end time": some time
}
If further details are required, please feel free to ask, and I will update the question accordingly.
Thank you!