Declaring google map markers in a loop

Question

I have a weird issue with event listeners on google map markers. Basically I want to declare a bunch of markers in a loop, and have each marker have an associated infowindow. The relevant code is:

var markers=[];
var contents = [];
var infowindows = [];


for (i = 0; i < 10; i++) { 

    markers[i] = new google.maps.Marker({
      position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5),
      map: map,
      title: 'samplemarker'
    });

    contents[i] = '<div class="popup_container">' +
    '</div>';


    infowindows[i] = new google.maps.InfoWindow({
    content: contents[i],
    maxWidth: 300
    });

    google.maps.event.addListener(markers[i], 'click', function() {
            infowindows[i].open(map,markers[i]);
            map.panTo(markers[i].getPosition());
    });  
}

The markers are created correctly, and the infowindows too, since if I do manually infowindows[i].open(map,markers[i]); they are opened correctly. However the listener does not work.

Even weirder: I have another marker, "marker_1" declared outside of the for loop, exactly the same way. If I write:

google.maps.event.addListener(marker_1, 'click', function() {
        infowindows[0].open(map,markers[0]);
        map.panTo(markers[0].getPosition());
});

The infowindow 0 is opened and the map is panned to marker 0 when marker_1 is clicked. However when writing, at the exact same position, the same lines except for marker_1 replaced with markers[0], a click on the marker 0 has no effect at all.

Thanks for any help and sorry if it's something stupid!

Answer 1

Inside your onclick handler, you don't already have that i value, in your case it would always take last value of i after the end of the loop, i.e 10, and markers[10] doesn't exist as you only have 10 markers.

To make it work you can e.g. add additional property to your markers in array, that would store marker index and use it inside your onlick handler

var markers=[];
var contents = [];
var infowindows = [];


for (i = 0; i < 10; i++) { 

    markers[i] = new google.maps.Marker({
        position: new google.maps.LatLng(40+Math.random()*5, 4+Math.random()*5),
        map: map,
        title: 'samplemarker'
    });

    markers[i].index = i; //add index property
    contents[i] = '<div class="popup_container"></div>';


    infowindows[i] = new google.maps.InfoWindow({
        content: contents[i],
        maxWidth: 300
    });

    google.maps.event.addListener(markers[i], 'click', function() {
        console.log(this.index); // this will give correct index
        console.log(i); //this will always give 10 for you
        infowindows[this.index].open(map,markers[this.index]);
        map.panTo(markers[this.index].getPosition());
    });  
}

see corrected example