google maps infowindow shows first infowindow only even for other markers

Question

I've seen other questions related to this and none of the solutions I saw seemed to help. Maybe I'm just overlooking something.

Any help would be appreciated.

I have a map that I'm loading upwards of 1000 markers. When a user performs a mouseover on the marker, I need the infowindow to display for that marker where the marker is.

The issue I'm having is that the same infowindow appears over the same marker no matter which marker I mouseover.

I provided a screenshot below that shows the map with the markers and an infowindow. So, no matter which marker I mouseover, that same infowindow is shown.

This is the code (gm is 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);
    });
}

enter image description here

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Apr 25 '14 at 23:46
thanks. but why the -1? I did search and didn't come across that question. I also have researched this and have tried multiple solutions to no avail. so a -1 for effort? Come on. — kambythet, Apr 26 '14 at 02:12

luciole75w · Accepted Answer · 2014-04-26T03:14:37.300

The pb is that the mouseover event handler is a closure referencing variables which are unique in the context of the calling function. Better move this part outside the loop to see clearer.

For example you can define a function such as :

function showInfo() { // called in the context of a marker var datum = opts.LocationsData[this.placeIndex]; var infowindow = new gm.InfoWindow({ content: '<strong>' + (datum.title != '' ? datum.title : datum.description) + '</strong>' }); infowindow.open(map, this); }

just before your loop, then tag the markers with a property placeIndex (for example) in your loop :

marker.placeIndex = i;

and finally bind the handler with :

gm.event.addListener(marker, 'mouseover', showInfo);

Edit: oops, my bad, forgot about the other references, same pb. You can probably replace the marker by 'this' within the handler. I updated the code.

google maps infowindow shows first infowindow only even for other markers

1 Answers1