Question

I’m trying to add listeners to markers in a loop but it doesn’t work.

When adding them separately it works. Like this:

    google.maps.event.addListener(markersArr[0], 'click', function() {
        infoWindowArr[0].disableAutoPan=true;
        infoWindowArr[0].open(map,markersArr[0]);
    });

    google.maps.event.addListener(markersArr[1], 'click', function() {
        infoWindowArr[1].disableAutoPan=true;
        infoWindowArr[1].open(map,markersArr[1]);
    });

But when adding in a loop, clicking on a marker doesn’t popup the infoWindow.

        for (var u=0; u<2; u++){
             google.maps.event.addListener(markersArr[u], 'click', function() {
             infoWindowArr[u].disableAutoPan=true;
             infoWindowArr[u].open(map,markersArr[u]);
        });

Can anyone explain how to make it work in a loop?

Answer 1

I had the same situation and Engineer answered with an anonymous function wrapper. It would look like this. It’s more compact but less readable than creating a side function.

    for (var u=0; u<2; u++){
      (function(u) {
         google.maps.event.addListener(markersArr[u], 'click', function() {
           infoWindowArr[u].disableAutoPan=true;
           infoWindowArr[u].open(map,markersArr[u]);
         });
      })(u);
    }