Show only one InfoBubble in Google Maps API V3

Question

I am previously using InfoWindow. It is working and it's limited to show only one InfoWindow, even if I am clicking many markers.

But when I changed it and replaced it with InfoBubble, it displays multiple bubbles. It does not automatically close the previously opened bubble, instead they are remained open and they seemed to be messing my map up.

I don't know what to do with this problem. Here's my code.

        downloadUrl("outputXML.php", function(data)
        {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++)
            {
                var name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var type = markers[i].getAttribute("type");
                var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lng")));
                var html = "<div class='phoneytext'> <b>" + name + "</b> <br/>" + address + "</div>";
                var icon = customIcons[type] || {};
                var marker = new google.maps.Marker
                ({
                    map: map,
                    position: point,
                    icon: icon.icon,
                    title:name
                });

                //Initiate an infoBubble - shows when a marker is tapped/clicked
                infoBubble = new InfoBubble
                ({
                  map: map,
                  shadowStyle: 1,
                  padding: 0,
                  backgroundColor: 'rgb(57,57,57)',
                  borderRadius: 4,
                  arrowSize: 10,
                  borderWidth: 1,
                  borderColor: '#2c2c2c',
                  disableAutoPan: true,
                  arrowPosition: 30,
                  backgroundClassName: 'phoney',
                  arrowStyle: 2
                });                 
                bindInfoBubble(marker, map, infoBubble, html);

            }
       });               

        function bindInfoBubble(marker, map, infoBubble, html)
        {
            google.maps.event.addListener(marker, 'click', function()
            {
                infoBubble.setContent(html);
                infoBubble.open(map, marker);
            });
        }

Answer 1

You could implement Singleton concept:

    downloadUrl("outputXML.php", function(data)
    {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++)
        {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
            var html = "<div class='phoneytext'> <b>" + name + "</b> <br/>" + address + "</div>";
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker
            ({
                map: map,
                position: point,
                icon: icon.icon,
                title:name
            });

            bindInfoBubble(marker, map, html);

        }
    });  

    var InfoBubbleClass = (function(){
        var instance = null;
        return {
           getInstance:function(){
               if(instance===null){
                   instance = new InfoBubble
                    ({
                       map: map,
                       shadowStyle: 1,
                       padding: 0,
                       backgroundColor: 'rgb(57,57,57)',
                       borderRadius: 4,
                       arrowSize: 10,
                       borderWidth: 1,
                       borderColor: '#2c2c2c',
                       disableAutoPan: true,
                       arrowPosition: 30,
                       backgroundClassName: 'phoney',
                       arrowStyle: 2
                    });                 
               }
               return instance;
           }
        };
    })();             

    function bindInfoBubble(marker, map, html)
    {
        google.maps.event.addListener(marker, 'click', function()
        {
            InfoBubbleClass.getInstance().setContent(html);
            InfoBubbleClass.getInstance().open(map, marker);
        });
    }