信息框中的多個標記Google Maps API V3

Question

我試圖在地圖上放置多個標記，並且能夠單獨切換它們，以便一次僅顯示一個標記。之前，我能夠完美地加載和切換單個信息框。我試圖達到的最終目標是一次只打開一個信息框，以及能夠訪問各個標記信息框。目前，我有多個標記，但信息框不會與該功能切換。

代碼：

var myCenter = new google.maps.LatLng(30.43, -84.285);//Tallahasse 
var myHouse = new google.maps.LatLng(30.438329, -84.29116599999998);//MyHouse 
//Initilalize map to center on Tallahassee 
function initialize() 
{ 
var mapProp = { 
    center:myCenter, 
    zoom:14, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var marker = new Array(); 
var ib = new Array(); 

for(var i = 0; i < 2; i++){ // START LOOP ----------------------------- 
//Marker(This creates the marker, nothing further is needed) 
marker[i] = new google.maps.Marker({ 
    position:myHouse, //Marker Position 
    map: map, //Which map this marker is on, defaults to current 
    title: 'More Info', // This displays text when the cursor hovers over the marker 
    draggable: false, 
    icon: 'images/sm1beermug.png' 
    }); 

    var boxText = document.createElement("div"); 
    boxText.style.cssText = "border: 3px solid #2d2d2d;"; 
    boxText.innerHTML = "<strong><font size=\"3\" color = #222222> Taylor's House </font></strong>"; 

    //font attribute not supported in HTML5, progress to using css in later revisions 
    var myOptions = { 
      content: boxText, 
      disableAutoPan: false, 
      maxWidth: 0, 
      pixelOffset: new google.maps.Size(-251, 0),//X axis should be half the size of box width 
      zIndex: null, 
      boxStyle: { 
      background: "url('tipbox.gif') no-repeat", 
      opacity: .94, 
      width: "502px" 
      }, 
      closeBoxMargin: "2px 2px 2px 2px", 
      closeBoxURL: "images/close.png", 
      infoBoxClearance: new google.maps.Size(10, 10), 
      isHidden: false, 
      pane: "floatPane", 
      enableEventPropagation: false 
    }; 

     ib[i] = new InfoBox(myOptions); 
     ib[i].open(map, marker[i]); 
     ib[i].hide(); 

     google.maps.event.addListener(marker[i], 'click', function() { 
      if(ib[i].getVisible()){ 
       ib[i].close(); 
       ib[i].open(map, marker[i]); 
       ib[i].hide(); 
      } 
      else{ 
       ib[i].show(); 
      } 
     }); 

     myHouse = new google.maps.LatLng(30.41329, -84.29316599999998); 
    }//END LOOP ------------------------------  

} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

試試這個代碼...

google.maps.event.addListener(marker[i], 'click', function() { 
     if(ib[i].getVisible()){ 
      ib[i].setVisible(false);  // hide() and show() are deprecated. 
     } 
     else{ 
      ib[i].setVisible(true);  // hide() and show() are deprecated. 
     } 
    }); 

Answer 2

我實現...
*初始化變量

var map; // Google map instance 
var mapMarkers = Array(); 
var mapInfoWindows = Array(); 

我添加和刪除標記的使用以下功能...

function addMarker(marker, infoWindow) { 
    // Update markers and infowindows 
    mapMarkers.push(marker); 
    mapInfoWindows.push(infoWindow); 

    marker.setMap(map); 
    google.maps.event.addListener(marker, 'click', function() { 
     // Open the window before closing to remove flicker 
     infoWindow.open(map, marker); 
     for (i in mapInfoWindows) { 
      if (mapInfoWindows[i] !== infoWindow) { 
       mapInfoWindows[i].close(); 
      } 
     } 
    }); 
} 

我的應用程序要求我刪除地圖刷新的所有標記。

function removeMarkers() { 
    for (i in mapInfoWindows) { 
     mapInfoWindows[i].close(); 
    } 
    for (m in mapMarkers) { 
     google.maps.event.clearInstanceListeners(mapMarkers[m]); 
     mapMarkers[m].setMap(null); 
    } 
    mapInfoWindows.length = 0; 
    mapMarkers.length = 0; 
} 

Answer 3

使用相同的信息框，只是更改每個點擊內容：通過除去IB [I] .hide（）

var _markers = []; 
var map = new google.maps.Map(document.getElementById(divId), mapOptions); 
var infoBox = new InfoBox(getInfoBoxOptions()); 

    $.each(data, function (i, obj) 
    { 
     var pos = new google.maps.LatLng(obj.Lat, obj.Lon); 
     var marker = _getMarker(map, obj.Name, pos); 
     marker.text = <div>Different content for each marker</div>; 
     markers.push(marker); 

     google.maps.event.addListener(marker, 'click', function() 
     { 
      infoBox.setContent(this.text); 
      infoBox.open(map, this); 
      map.panTo(this.getPosition()); 
     }); 
    });