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

google-maps, google-maps-api-3

Solution

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.

Problem

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!

Original source

Related problems