谷歌地圖API v3 - 在頁面上使用多個地圖，每個都有一個infowindow，只需點擊最後一個地圖顯示彈出框

Question

我一直在整個星期都在努力尋找這一個，所有我能找到的答案都是「map with multiple infowindows「，但沒有涉及一個頁面上的多個地圖，每個地圖都有一個infowindow。當我點擊頁面第一張地圖上的標記時，第二張地圖的標記infowindow會彈出到第二張地圖中。

請參閱我的意思截圖：Multi maps popup issue

，處理，作如下所示的實際代碼。它實際上是一種改進的方式（至少是在google搜索高低後顯示地圖及其標記和infowindows的標記[i] = new google.maps.Marker（以及特別是stackoverflow ）對於任何可能有幫助的線索

我不知道如何讓每個地圖的標記顯示他​​們自己的infowindow，而不是最後一個（最後地圖的標記）任何在這個方向的線索將不勝感激，謝謝！

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

Answer 1

你的循環變化的currentMap和currentMarker（它們是x，當您指定的傾聽者，當聽者實際執行y）的值。試着在值，您關閉w^ant例如：

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