Google maps infowindow showing on wrong marker

Question

I have a piece of javascript code where I create markers and attach InfoWindows to them, like this:

for (var i = 0; i < 8; i++) {
    var marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

But when I click one of the markers, the infowindow always shows only on one marker. What am I doing wrong?

score 34 · Accepted Answer · answered Apr 20 '11 at 21:13

There's a very simple solution to your problem, which is to put the loop's code into a function. Your problem is that you overwrite the variable marker, so that when it is accessed in the click event, it uses the latest version of that variable, which is the last marker you added.

So, when you put it into a function, the variable is in a separate namespace and therefore not overwritten. In other words, this should work:

for (var i = 0; i < 8; i++) {
    createMarker(i);
}

function createMarker(i) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Thank you for your post! But how come each new `marker` object isn't stored in the first case? I am confused why it works when you put the code inside the loop to a separate function. — Maximus S, Mar 07 '14 at 01:26
Do you mind taking a look at this example? It uses the same code as what you have written but calls from an API. The info windows are not opening. http://jsfiddle.net/b20n4jbg/ @Herman Schaaf — adin, Nov 30 '15 at 16:39

score 25 · Answer 2 · answered Nov 29 '13 at 13:25

25

google.maps.event.addListener(Marker, 'click', function() {
    InfoWindow.open(map, this);
});

You shoud use this instead of marker because marker will hold the value of last placed marker.

answered Nov 29 '13 at 13:25

André Luiz

348
3
5

score 2 · Answer 3 · answered Dec 21 '12 at 12:27

2

for (var i = 0; i < 8; i++) {
    var marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
       content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        new google.maps.InfoWindow({
            content: this.content
        }).open(map, this);
    });
}

answered Dec 21 '12 at 12:27

Mr.Sing

135
7

Could add some context to your answer please, i.e. how does it help the questioner? :-) – Jonathan Dec 21 '12 at 12:45
I upvoted this 1 hour ago but testing with other content this opens a infowindow multiple times, so it didn't helped me after all, sorry. – Miguel Garrido Jan 07 '16 at 04:21

score 2 · Answer 4 · answered Feb 28 '19 at 13:08

As a new option that was not available 7 years ago:

all modern browsers (which is all browsers supporting ECMAScript 6) support block scoped variables which are defined using the let statement. let initializes a variable inside of a given scope e.g. inside of a loop whereas var defines variables on global or function level. In your case exchanging the var with let will make sure that each marker is properly initialized as a new variable:

for (var i = 0; i < 8; i++) {
    let marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    let infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

score 0 · Answer 5 · answered Oct 25 '17 at 04:51

Try this:

        // Create a marker for each place.
         marker = new google.maps.Marker({
             map: map,
             icon: icon,
             title: place.name,
             animation: google.maps.Animation.DROP,
             position: place.geometry.location
         });
         var infowindow = new google.maps.InfoWindow({
         content:'<div><strong>' + place.name + '</strong><br>' +
            'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>'
            });
        marker.addListener('click', function() {
        infowindow.open(map, this);
        });

Thank you

Google maps infowindow showing on wrong marker

5 Answers5

Linked