on marker click close infobubble

Question

I am using Gmap3 jQuery plugin with infobubble plugin and php to get json reponse for adding markers.

I have added GoogleMap marker using addMarkers option of Gmap3 plugin.

{
    action: 'addMarkers',
    markers:address_data,
    marker:
    {
        options:
        {
            draggable: false,
            icon: HOST+'img/icons/google_marker.png',
            animation: google.maps.Animation.DROP
        },
        events:
        {
            click: function(marker, event, data)
            {
                var map = $(this).gmap3('get');

                infoBubble = new InfoBubble({
                    maxWidth: 310,
                    shadowStyle: 1,
                    padding: 5,
                    borderRadius: 10,
                    arrowSize: 20,
                    borderWidth: 5,
                    borderColor: '#CCC',
                    disableAutoPan: true,
                    hideCloseButton: false,
                    arrowPosition: 50,
                    arrowStyle: 0
                });

                if (!infoBubble.isOpen())
                {
                    infoBubble.setContent(data);
                    infoBubble.open(map, marker);
                    console.log('open');
                }
                else
                {
                    infoBubble.close();
                }

            }
        }
    }
}

All is working well on first attempt but when i click on marker then infobubble keeps popping up.

Means if i have one marker and some content to display in bubble then when i keep clicking on same marker infobubble added one on other but what i need "I need to close old infobubble if marker clicked again or other marker is clicked " just like normal infowindow dose.

Hope i can make clear point.

Thanks.

score 1 · Accepted Answer · edited Apr 10 '13 at 09:59

Declare infoBubble as a var outside the click handler, and instantiate it there.

Then the checks for infoBubble.isOpen() will be relevant.

From the code you provided, you create a new infoBubble on each click, hence the infoBubble.isOpen() check applies to that newly created object.

How to do it

Declare var infobubble; as global variable.

and inside of click event handler add below line that will do that.

if( infoBubble != null ) { infoBubble.close(); }

so code will look as below,

var infobubble;
//other code for getting markers and all and then `addMarkers` code
{
    action: 'addMarkers',
    markers:address_data,
    marker:
    {
        options:
        {
            draggable: false,
            icon: HOST+'img/icons/google_marker.png',
            animation: google.maps.Animation.DROP
        },
        events:
        {
            click: function(marker, event, data)
            {
                var map = $(this).gmap3('get');

                if( infoBubble != null ) { infoBubble.close(); }

                infoBubble = new InfoBubble({
                    maxWidth: 310,
                    shadowStyle: 1,
                    padding: 5,
                    borderRadius: 10,
                    arrowSize: 20,
                    borderWidth: 5,
                    borderColor: '#CCC',
                    disableAutoPan: true,
                    hideCloseButton: false,
                    arrowPosition: 50,
                    arrowStyle: 0
                });

                infoBubble.setContent(data);
                infoBubble.open(map, marker);
            }
        }
    }
}

nope its not working because everytime i click it create new instance — Dipesh Parmar, Apr 10 '13 at 08:24
i have solved it and i have added how i did to your answer so other user can solve it — Dipesh Parmar, Apr 10 '13 at 10:00

on marker click close infobubble

1 Answers1