Google Maps API v3 - using multiple maps on page, each with one infowindow, on click only the last map displays popup

Question

I've been struggling with this one the whole week and all I could find were answers to "map with multiple infowindows" but none that relate to multiple maps on one page, each map having one infowindow. When I click the marker on the first map in the page, the second map's marker infowindow popups up in the second map.

Please see a screenshot of what I mean: Multi maps popup issue

The actual code that handles that is as follows below. It's actually an improved way (at least the last part after line " marker[i] = new google.maps.Marker({ ") of displaying the map with their markers and infowindows after I searched high and low on google (and especially stackoverflow) for any clues that might help.

I have no idea how to make each map's marker display their own infowindow, not the last one (last map's marker). Any clues in that direction would be greatly appreciated, thank you!

  var map_collection = Drupal.settings.wysiwyg_map_maps;
  var map = [];
  var marker = [];
  for (var i = 0; i < map_collection.length; i++) {
    var latlng = new google.maps.LatLng(map_collection[i]['lat'], map_collection[i]['lon']);
    switch(map_collection[i]['map_type']) {
      case 'satellite':
        var mapOptions = {
          zoom: parseInt(map_collection[i]['zoom']),
          scrollwheel: false,
          center: latlng,
          streetViewControl: false,
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        break;

      case 'hybrid':
        var mapOptions = {
          zoom: parseInt(map_collection[i]['zoom']),
          scrollwheel: false,
          center: latlng,
          streetViewControl: false,
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        break;

      case 'terrain':
        var mapOptions = {
          zoom: parseInt(map_collection[i]['zoom']),
          scrollwheel: false,
          center: latlng,
          streetViewControl: false,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        break;

      default:
        var mapOptions = {
          zoom: parseInt(map_collection[i]['zoom']),
          scrollwheel: false,
          center: latlng,
          streetViewControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        break;

    }
    // Create the map and drop it into the relavent container.
    var mapContainer = document.getElementById("wysiwyg_map_" + map_collection[i]['container_id']);
    if (mapContainer) {
      map[i] = new google.maps.Map(document.getElementById("wysiwyg_map_" + map_collection[i]['container_id']), mapOptions);

      // Add marker popup title and text
      var displayPopup = 0;
      if(map_collection[i]['marker_popup_title'] && map_collection[i]['marker_popup_text']) {
        var markerPopupContent = '<div id="marker-content">' +
          '<div id="marker-popup-title"><h1>' + map_collection[i]['marker_popup_title'] + '</h1></div>' +
          '<div id="marker-popup-text"><p>' + map_collection[i]['marker_popup_text'] + '</p></div>' +
          '</div';
        displayPopup = 1;
      } else if(map_collection[i]['marker_popup_title']) {
        var markerPopupContent = '<div id="marker-content">' +
          '<div id="marker-popup-title"><h1>' + map_collection[i]['marker_popup_title'] + '</h1></div>' +
          '</div';
        displayPopup = 1;
      } else if(map_collection[i]['marker_popup_text']) {
        var markerPopupContent = '<div id="marker-content">' +
          '<div id="marker-popup-text"><p>' + map_collection[i]['marker_popup_text'] + '</p></div>' +
          '</div';
        displayPopup = 1;
      }

      if(displayPopup) {
        var popupBox = new google.maps.InfoWindow({
          content: markerPopupContent
        });
      }

      // Add the marker to the map.
      marker[i] = new google.maps.Marker({
        position: latlng,
        map: map[i],
        title: map_collection[i]['marker_title'],
        animation: google.maps.Animation.DROP
      });

      if(displayPopup) {
        var currentMap = map[i];
        var currentMarker = marker[i];
        currentMarker.addListener('click', function() {
          popupBox.open(currentMap, currentMarker);
        });

        if(map_collection[i]['currentMarker_popup_default'] == 'true') {
          google.maps.event.trigger(currentMarker, 'click');
        }
      }
    }
  }

try with different ids for each marker and info window. I think its because of id repeat. — Vikram, Apr 15 '16 at 16:20
Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. — geocodezip, Apr 15 '16 at 21:23

score 0 · Accepted Answer · answered Apr 15 '16 at 16:22

0

Your loop is changing the value of currentMap and currentMarker (they are x when you assign the listener, but y when the listener actually executes). Try closing around the values you want e.g.:

(function(currentMarker, currentMap) {
    currentMarker.addListener('click', function() {
      popupBox.open(currentMap, currentMarker);
    });
})(currentMarker, currentMap);

answered Apr 15 '16 at 16:22

pherris

17,195
8
42
58

Both Vikram and pherris were right in solving the code above. Considering I had already implemented (at least in part) what Vikram suggested and that pherris' suggestion was missing from my code altogether, I believe I'll mark pherris' reply as the answer. So, after integrating Vikram's, pherris' and this post http://stackoverflow.com/questions/7044587/adding-multiple-markers-with-infowindows-google-maps-api, I was able to come up with the final code that actually works now: – Andrei Condurachi Apr 17 '16 at 10:27

Google Maps API v3 - using multiple maps on page, each with one infowindow, on click only the last map displays popup

1 Answers1