Have just one InfoWindow open in Google Maps API v3

Question

I need to have only one InfoWindow open on my Google Map. I need to close all other InfoWindows before I open a new one.

Can someone show me how to do this?

Answer 1

Basically you want one function that keeps reference to one new InfoBox() => delegate the onclick event. While creating your markers (in a loop) use bindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBox is assigned asynchronously and kept in memory. Every time you call bindInfoBox() the return function will be called instead. Also handy to pass the infoBoxOptions only once!

In my example I've had to add an extra param to the map as my initialization is delayed by tab events.

InfoBoxOptions