I've come across similar questions about this issue, but none of the solutions I found have worked for me. Maybe I'm missing something important.
Any assistance would be greatly appreciated.
The challenge I'm facing involves a map with over 1000 markers being loaded. When a user hovers their mouse over a marker, I want an infowindow to display that shows information specific to that marker's location.
However, the problem I'm encountering is that the same infowindow pops up over every marker, regardless of which one I hover over.
Below is a screenshot showing the map with all the markers and a single infowindow. As mentioned, no matter which marker I hover on, that same infowindow appears.
Here is the code snippet (gm represents an instantiated google.maps object):
for (var i = 0; i < opts.LocationsData.length; i ++) {
var datum = opts.LocationsData[i];
var icon = new gm.MarkerImage(datum.map_pin_loc + datum.map_marker + '.svg',null, null, null, new google.maps.Size(31,51));
var loc = new gm.LatLng(datum.latitude, datum.longitude);
var zi = 500;
if(i>9)
{
datum.map_pin_icon = datum.map_pin_loc + 'dot1.svg';
icon = new gm.MarkerImage(datum.map_pin_icon,null, null, null, new google.maps.Size(8,8));
zi=450;
}
var marker = new gm.Marker({
position: loc,
/** title: datum.title != '' ? datum.title : datum.description, **/
icon: icon,
zIndex: zi,
map: map
});
marker.type = 'point';
marker.post_id = datum.pin_id;
marker.scrollAndAnimate = true;
/** (these are used elsewhere in my code for marker management and other purposes) **/
markers.push(marker);
markersLatLngObjs.push(loc);
var infowindow = new gm.InfoWindow({
content: '<strong>' + (datum.title != '' ? datum.title : datum.description) + '</strong>'
});
gm.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
}