Несколько маркеров с инфобоксами API Карт Google 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

Используйте тот же инфобокс и просто изменить содержимое на каждый клик:

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