關閉所有打開的Google地圖信息框

Question

我已經嘗試了一些我在StackOverflow上找到的東西，而且我對此沒有任何好運。我的Javascript非常生疏，所以如果這件作品非常簡單，我不會感到驚訝。

我正在爲一個網站構建一個Google Map系統，並且我正在使用infoBox系統，以便我可以更好地控制彈出窗口的視覺樣式。我的問題是我只想在任何給定時刻打開一個infoBox。所以只要點擊1個標記，前面的infoBox應該關閉。我知道最好的方法是跟蹤最後一個要打開的東西，但是使用循環來構建所有東西，我不確定如何獲取特定信息框的實例名稱以使用close（）函數。

這裏是我的javascript：

var map; 
    var markers = new Array(); 

    // This function builds out the Google Map 
    function initialize() { 

     // Set the center point of the map to be create 
     var mapCenter = new google.maps.LatLng(40.0378755, -76.3055144); 

     // Create a map object, and include the MapTypeId to add to the map type control. 
     // This is where we specify the UI settings for the map. 
     var mapOptions = { 
      center: mapCenter, 
      zoom: 8, 
      disableDefaultUI: false, 
      panControl: false, 
      zoomControl: true, 
      mapTypeControl: true, 
      scaleControl: true, 
      scaleControlOptions: {position: google.maps.ControlPosition.RIGHT_BOTTOM}, 
      streetViewControl: false, 
      overviewMapControl: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
     }; 

     // Draw the map on-screen. 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    }; 

    // This function creates pins for the map. 
    var descriptionBox; 
    (function() { 

     google.maps.Map.prototype.markers = new Array(); 

     google.maps.Map.prototype.addMarker = function(marker) { 
     this.markers[this.markers.length] = marker; 
     }; 

    })(); 

    //This function builds the locations and information for the markers and infoboxes 
    function showOverlays() { 

     //Set data for individual marker 
     var a = new Array(); 
      var t = new Object(); 
     t.name = "Alert at this Location" 
     t.desc = "Here's a brief description." 
     t.lat = 40.3178755 
     t.lng = -75.9155144 
     t.icon = "low" 
     a[0] = t; 

//Set data for individual marker 
var t = new Object(); 
t.name = "Moderate priority Issue Here." 
t.desc = "Read this text." 
t.lat = 40.4178755 
t.lng = -75.8155144 
t.icon = "mid" 
a[1] = t; 

//Set data for individual marker 
var t = new Object(); 
t.name = "HIGH PRIORITY!" 
t.desc = "This is some text" 
t.lat = 40.5178755 
t.lng = -75.4155144 
t.icon = "high" 
a[2] = t; 

//Set data for individual marker 
var t = new Object(); 
t.name = "Another Mid Alert" 
t.desc = "Description would go here. This is a longer description to show how it would be handled." 
t.lat = 39.4178755 
t.lng = -77.4155144 
t.icon = "mid" 
a[3] = t; 

//Set data for individual marker 
var t = new Object(); 
t.name = "ALERT!!! READ ME!" 
t.desc = "More Text Here" 
t.lat = 40.3178755 
t.lng = -76.3155144 
t.icon = "high" 
a[4] = t; 

//Gather the data for each individual marker, and put the data in a usable format. 
for (var i = 0; i < a.length; i++) { 
    var latlng = new google.maps.LatLng(a[i].lat, a[i].lng); 
    var markerIcon = a[i].icon; 
    var heading = a[i].name; 
    var description = a[i].desc; 
    var infoContent = "<h1>"+heading+"</h1><p>"+description+"</p>"; 
    map.addMarker(createMarker(a[i].name,latlng,markerIcon,infoContent)); 
} 

//Builds and places the markers on the map.  
function createMarker(name, latlng, icon, infoContent) { 
var marker = new google.maps.Marker({position: latlng, map: map, icon: "images/"+markerIcon+"_icon.png"}); 
//Create event listener to know when a marker is clicked on. 
google.maps.event.addListener(marker, "click", function() { 
    var descriptionBox 
    descriptionBox = new InfoBox(); 
    //Settings for the infoBox 
    var myOptions = { 
      content: infoContent 
      ,boxClass: "myInfoBoxStyle" 
      ,disableAutoPan: false 
      ,maxWidth: 0 
      ,pixelOffset: new google.maps.Size(0, 0) 
      ,zIndex: null 
      ,closeBoxMargin: "2px 2px 2px 2px" 
      ,closeBoxURL: "images/close.gif" 
      ,infoBoxClearance: new google.maps.Size(1, 1) 
      ,isHidden: false 
      ,pane: "floatPane" 
      ,enableEventPropagation: false 
      }; 
      //Close any open boxes 
      descriptionBox.close(); 
      //Create new infoBox instance 
      descriptionBox = new InfoBox(myOptions); 
      //Draw infoBox on the map. 
      descriptionBox.open(map, marker); 
     }); 
     return marker; 
     }; 
    }; 

有被點擊調用showOverlays（）按鈕;功能在地圖上顯示標記。

那麼我錯過了什麼？任何幫助將不勝感激。

Answer 1

我還沒有使用InfoBox。我更熟悉InfoWindow，但我相信它們非常相似。

它看起來就像你在每個標記的點擊收聽創建一個新的信息框：

var descriptionBox; 
descriptionBox = new InfoBox(); 

相反，申報信息框點擊收聽外：

var infoBox= new google.maps.InfoBox({ content: 'hello world' }); 

，並參考它的點擊裏面聽衆：

google.maps.event.addListener(marker, "click", function() { 
    infoBox.open(map, this); 
    ... 

查看here瞭解更多信息...

Answer 2

試試這個代碼...

var infowindows = new Array(); 
var popup = new InfoBox({ 
    // size: new google.maps.Size(420,130), 
    content:content_info 
    ,pixelOffset: new google.maps.Size(-200, -241) 
    ,disableAutoPan: false 
    ,closeBoxMargin: "5px 5px 2px 2px" 
    ,boxStyle: {opacity: 0.95 
       } 

}); 
infowindows.push(popup); //push all infoboxes to an array 

google.maps.event.addListener(marker, 'click', function() { 
    close_popups(); //close any infobox open 
    map.panTo(mycenter1); 
    popup.open(map, marker); 


    // currentPopup = null; 
    }); 

function close_popups(){ 
    for(var i = 0; i<infowindows.length; i++){ 
    infowindows[i].close(); 
    } 
} 

的