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

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.


The usual suggestion for a single infowindow is to only create one, then reuse it for all the markers (changing its content).

Here is an example that does that with the v3 API (I think of it as "v2 infowindow behavior" because the v2 API only allowed a single infowindow) http://www.geocodezip.com/v3_markers_normal_colored_infowindows.html

Here is another example based off of Mike Williams' v2 tutorial: http://www.geocodezip.com/v3_MW_example_map1.html

and your example modified: http://jsfiddle.net/uGnQb/6/