Close open InfoBubble when open a new (gMap v3)

Question

I do not know what to do... I just want to close all opened infoBubbles if I'm going to open a new one. I am using the following code. Ideas? I tried a lot and googled a lot but it shouldn't be so complicated, should it? I thought to create an array and save id for the open one, but I think that there must be another, quite easier way to fix this.

$(document).ready(function(){
            createmap();

    function createmap(lat,lng){
        var latlng = new google.maps.LatLng(50, 10);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    bounds = new google.maps.LatLngBounds();
            createMarker();
    }

    function createMarker(){
            var markers = [];
            var cm = window.cm = new ClusterManager(
                map,
                {
                    objClusterIcon: new google.maps.MarkerImage('images/map/flag_cluster.png', false, false, false, new google.maps.Size(20,20)),
                    objClusterImageSize: new google.maps.Size(20,20)
                }
            );

            var json = [];
            var x1 = -85;
            var x2 = 85;
            var y1 = -180;
            var y2 = 180;
            for (var i=0; i<20; ++i) {
                json.push(
                    '{'+
                        '"longitude":'+(x1+(Math.random()*(x2-x1)))+','+
                        '"latitude":'+(y1+(Math.random()*(y2-y1)))+','+

                        '"title":"test"'+
                    '}'
                );
            }
            json = '['+json.join()+']';
            // eval is ok here.
            eval('json = eval(json);');

            infos = [];
            $.each(json, function(i,item){      
    var contentString = '<div id="content"><a onclick="createdetailpage('+i+');">'+item.title+'<br /></a></div>';

                console.log(item.latitude);
                var myLatlng = new google.maps.LatLng(item.latitude,item.longitude);
            var marker = new google.maps.Marker({
                    position: myLatlng, 
                    //map: map, 
                    flat: true,
                    title:item.title,
                    //animation: google.maps.Animation.DROP,
                    //icon: myIcon
                });  
                var infoBubble = new InfoBubble({               
                    content: '<div class="phoneytext">'+contentString+'</div>'
                });                                

                google.maps.event.addListener(marker, 'click', function() {
                    if (!infoBubble.isOpen()) {
                        infoBubble.open(map, marker);
                    }
                }); 
                cm.addMarker(marker, new google.maps.Size(50, 50));                 
            });
        map.fitBounds(bounds);              
    }
    });

Answer 1

The simplest approach to only have one infoBubble open is to only have one infoBubble and open it with different contents depending on the marker that is clicked.

InfoWindow example with custom markers (same concept applies to InfoBubble)

Answer 2

The InfoBubble is an OverlayView. As far as I can see, an overlaycomplete event is emitted when an overlay is added. Maybe all your InfoBubbles could listen to that event and close if the added overlay is a different one than "this".

It's just a thought, though, I haven't tried it myself. Feedback appreciated if you try it out!