on marker click close infobubble - php

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.

Answer 1

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);
}
}
}
}