Google Map V3 - Allow only one infobox to be displayed at a time

Question

I'm moving from infoWindow to infoBox for better looking info windows.

I have a number of markers on the map. What I want to do is when one infoBox is already opened, if the user clicks on other markers, the current infoBox will close automatically and new infoBox will open so that the user does not need to close the current infoBox, and there will always be only one infoBox displayed at a time.

Here's the demo and code of my current solution http://jsfiddle.net/neo3000ultra/9jhAy/

Thanks in advance!

Answer 1

Change this part:

        google.maps.event.addListener(marker, "click", function (e) {
            ib.open(map, this);
        });

        var ib = new InfoBox(myOptions);

       google.maps.event.addListener(marker2, "click", function (e) {
            ib2.open(map, this);
        });

        var ib2 = new InfoBox(myOptions2);

to the following:

    var ib = new InfoBox();

    google.maps.event.addListener(marker, "click", function (e) {
        ib.close();
        ib.setOptions(myOptions)
        ib.open(map, this);
    });

   google.maps.event.addListener(marker2, "click", function (e) {
        ib.close();
        ib.setOptions(myOptions2)
        ib.open(map, this);
    });

Works for me, also in IE9: http://jsfiddle.net/doktormolle/9jhAy/1/

Note the use of ib.close() before opening the infoBox, seems to be the trick.