Close infobox when another one is clicked (Google Maps API v3)

Question

I'm developing an app with Google maps that should display several categories on a map. Now I would like to have the possibility to add markers from several categories and delete them as well if necessary.

I'm using the infobox plugin, which makes it possible to customize the windows infoboxes. You can find it HERE

My question. I want one infobox to close when you click another marker. I don't know how to, though. This is the code I used for the click event on the markers.

CODE

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        newMarkers[i].infobox.open(map, this);
        map.panTo();
    }
})(marker, i));

Anyone that can help me with this?

Answer 1

The code you're using doesn't close the infobox. The other thing that comes into play is using just one infobox and adding and removing the info from the infobox. (which is what the first five lines of code does). This is the code I'm using.

parkMarker.push(marker);
parkOptions.push(markerOptions);

parkMarker[arrayLoc].infobox = new InfoBox(parkOptions[arrayLoc]);

parkMarker[arrayLoc].infobox.open(map, marker);
parkMarker[arrayLoc].infobox.close();

google.maps.event.addListener(parkMarker[arrayLoc], 'click', (function(marker, arrayLoc){
    return function(){
        for ( h = 0; h < parkMarker.length; h++ ) {
            if(parkMarker[h].infobox){
              parkMarker[h].infobox.close();
        }
    }
      marker.infobox.open(map, marker);
  }
})(parkMarker[arrayLoc], arrayLoc));  

This jsfiddle doesn't work, but it has all the code I use to get this to work: http://jsfiddle.net/UDRmz/1/

Answer 2

Add this jQuery as first line after you open the addListener:

$(".infoBox").fadeOut(300);