My latest project involves utilizing a JSON feed to retrieve earthquake data within specified latitude and longitude boundaries, essentially creating a defined area. The information gathered is then used to mark locations on a Google map. Each marker is intended to provide additional details when clicked, so I have been working on implementing InfoWindow objects to display relevant information associated with each marker. However, I have encountered an issue where clicking on any marker always opens the same InfoWindow above one specific marker in that group. It seems that the last created InfoWindow in my loop is consistently being displayed. Below is the code snippet:
$.getJSON(url, function(jsonData) {
for(var i = 0; i < jsonData.earthquakes.length; i++) {
var position = new google.maps.LatLng(jsonData.earthquakes[i].lat, jsonData.earthquakes[i].lng);
var infoContent = jsonData.earthquakes[i].lat + ", " + jsonData.earthquakes[i].lng;
var newMarker = new google.maps.Marker({
map: map,
position: position,
title: jsonData.earthquakes[i].eqid
})
var newTooltip = new google.maps.InfoWindow({
content: infoContent
})
google.maps.event.addListener(newMarker, 'click', function() {
newTooltip.open(map, newMarker);
});
markersArray.push(newMarker);
tooltipsArray.push(newTooltip);
}
});
The markersArray stores all marker objects on the map, while tooltipsArray holds the InfoWindow objects. Both arrays are global variables.