Multiple Markers with infoboxes Google Maps API V3

Question

I'm trying to put multiple markers on the map and also be able to toggle them individually so that only one shows at a time. Prior, I was able to load and toggle a single info box flawlessly. The end goal I'm trying to achieve is to only have one info box open at a time, as well as being able to access individual marker info boxes. Currently, I have multiple markers but the info boxes wont toggle with the function.

Code:

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

Use the same infobox and just change the content on each click:

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

Answer 2

My implementation...
* Initialize variables

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

I add and remove markers using the following functions...

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

My application required that I remove all markers for a map refresh.

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

try this code...

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