CODEWITHSUNDEEP
javascriptgoogle-maps
animus
animus

Reputation: 40

Adding event listeners to an array of google map markers failing

I am using the infoWindow feature of google maps to add information boxes which pop up when I click on any Marker I've placed on the map.

My problem: The Event Listeners are not being added correctly to the markers. All the markers load, but when I click on any marker, only the last infoWindow pops up.

var markers = [];
var infoWindows =[];
for(var x in data.results)
{
        var result = data.results[x]
        var contentString = generateContentString(result);
        var latLng = new google.maps.LatLng(result.coordinates.latitude,result.coordinates.longitude);

        infoWindows[x] = new google.maps.InfoWindow({
            content: contentString
        });
        markers[x] = new google.maps.Marker({
            position: latLng,
            map: map,
            title: result.location
        });
        markers[x].addListener('click', function() {
            infoWindows[x].open(map, markers[x]);
        });
}

markers stores marker objects and infoWindows stores infoWindow objects.

Upvotes: 0

Views: 402

Answers (2)

Downhillski
Downhillski

Reputation: 2655

You could write the callback parameters into your callback context but that is the not the pretty way.

Or you just use a closure.

var markers = [];
var infoWindows = [];
for (var i in data.results) (function(x){
  var result = data.results[x]
  var contentString = generateContentString(result);
  var latLng = new google.maps.LatLng(result.coordinates.latitude, result.coordinates.longitude);

  infoWindows[x] = new google.maps.InfoWindow({
    content: contentString
  });
  markers[x] = new google.maps.Marker({
    position: latLng,
    map: map,
    title: result.location
  });
  markers[x].addListener('click', function() {
    infoWindows[x].open(map, markers[x]);
  });
})(i);

With JS async methods, you could achieve it by calling .forEach(fn)

  data.results.forEach(function(d, x) {
    var result = data.results[x]

    var latLng = new google.maps.LatLng(result.coordinates.latitude, result.coordinates.longitude);

    infoWindows[x] = new google.maps.InfoWindow({
      content: JSON.stringify(data.results[x].coordinates)
    });
    markers[x] = new google.maps.Marker({
      position: latLng,
      map: map,
      title: result.location
    });
    markers[x].addListener('click', function() {
      infoWindows[x].open(map, markers[x]);
    });
  });

Upvotes: 1

ScaisEdge
ScaisEdge

Reputation: 133400

You could use a clousure so you can preserve the value for each iteration in a proper listener ..

  var markers = [];
  var infoWindows =[];

  //  add the clousure 
  var addListenersOnMarker = function(actMarker, actInfoWindow) {
      google.maps.event.addListener(actMarker, 'click', function() {
          actInfoWindow.open(map,actMarker);
      }
    }

  for(var x in data.results)
  {
          var result = data.results[x]
          var contentString = generateContentString(result);
          var latLng = new google.maps.LatLng(result.coordinates.latitude,result.coordinates.longitude);

          infoWindows[x] = new google.maps.InfoWindow({
              content: contentString
          });
          markers[x] = new google.maps.Marker({
              position: latLng,
              map: map,
              title: result.location
          });

          // call the function  
          addListenersOnMarker(markers[x], infoWindows[x] );

  }

Upvotes: 0

Related Questions