CODEWITHSUNDEEP
jqueryinfobox
Helena Standaert
Helena Standaert

Reputation: 569

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

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?

Upvotes: 1

Views: 1997

Answers (2)

brouxhaha
brouxhaha

Reputation: 4093

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/

Upvotes: 1

Sergio
Sergio

Reputation: 28837

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

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

Upvotes: 2

Related Questions