谷歌API V3多個infowindows再加上關閉點擊

Question

我想出瞭如何有多個標記與信息窗口，但他們不會關閉當你點擊另一個標記，我相信這是因爲我爲每個標記創建一個新的信息窗口，任何幫助，將不勝感激。

<script type="text/javascript"> 


var map ; 
    function initialize() { 
    var latlng = new google.maps.LatLng(53.063165, -3.205390); 
    var myOptions = { 
     zoom: 6, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.SATELLITE, 
     zoomControl: false, 
     mapTypeControl: false, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
      position: google.maps.ControlPosition.LEFT_CENTER 
     }, 
panControl: false, 
streetViewControl: false, 
     streetViewControlOptions: { 
      position: google.maps.ControlPosition.LEFT_CENTER 
     } 
}; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var marker = add_marker(56.747923,-3.717155,"Ben Vrackie","<b>Ben Vrackie</b><br><br>Perthshire classic! some sweet hidden gems on this loop.<br> surrounded by amazing countryside, Lochs, hills this<br>has it all... Red Grade."); // pass in as Latitude, then Longitude 
    marker.setMap(map); 

    var marker = add_marker(57.556366,-5.409222,"Torridon Forest","<b>Torridon Forest</b><br><br>Technical and breathtaking.... <br>Black/red grade."); // pass in as Latitude, then Longitude 
    marker.setMap(map) 
} 


    function add_marker(lat,lng,title,box_html) { 

    var infowindow = new google.maps.InfoWindow({ 
     content: box_html 
    }); 

    var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat,lng), 
      map: map, 
      title: title 
    }); 


    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
}); 
return marker; 
    } 



</script> 

Answer 1

僅創建一個全局InfoWindow對象。

//Global 
    var infowindow = new google.maps.InfoWindow(); 

然後

function add_marker(lat,lng,title,box_html) { 

     var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(lat,lng), 
       map: map, 
       title: title 
     }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(box_html); 

     infowindow.open(map,marker); 
    }); 
    return marker; 
    } 

Answer 2

更改add_marker功能使用一個單一的全球信息窗口。方式一：在這個example in the "Demo Gallery"