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)