CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-markers
PeanutButterJelly
PeanutButterJelly

Reputation: 1017

Google maps infowindow showing on wrong marker

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?

Upvotes: 20

Views: 10057

Answers (5)

SaschaM78
SaschaM78

Reputation: 4497

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);
    });
}

Upvotes: 2

Therichpost
Therichpost

Reputation: 1815

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

Upvotes: 0

Andr&#233; Luiz
Andr&#233; Luiz

Reputation: 348

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.

Upvotes: 25

Mr.Sing
Mr.Sing

Reputation: 135

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);
    });
}

Upvotes: 2

Herman Schaaf
Herman Schaaf

Reputation: 48445

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);
    });
}

Upvotes: 34

Related Questions