cannot close jquery tooltip in a google map infobox - google-maps-markers

Question

In my application, I've a huge map on the dashboard and there I'm placing markers when ajax content is loaded. Each marker has specifically designed infobox where I've a link that has two clases:
tooltip
fancybox
On mouseover, I expect the tooltip opened and on mouseout I expect it to be closed and on click I expect three things:
the infobox to be closed
the fancybox to be opened
the tooltip to be closed
The problem is that on mouseover and mouseout, the tooltip acts as expected but when I click on the link, the infobox closes, the fancybox opens but the tooltip doesn't close and it looses the parent connection and never closes.
Here are my codes:
var infowindow_options = {
content: '...<a class="bind_tooltip">...</a>...',
disableAutoPan: false,
maxWidth: 0,
alignBottom: true,
pixelOffset: new google.maps.Size( 10, 10 ),
zIndex: null,
boxClass: 'info_window',
closeBoxMargin: '10px 10px 0 0',
closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif',
pane: 'floatPane',
enableEventPropagation: true,
infoBoxClearance: '10px',
position: mrkr.position
};
google.maps.event.addListener( mrkr, 'click', function() {
infowindow ? infowindow.close() : '';
infowindow = new InfoBox( infowindow_options );
infowindow.open( map );
return false;
} );
google.maps.event.addListener( map, 'click', function() {
if( infowindow ) {
infowindow.close();
$( '.bind_tooltip' ).tooltip( 'close' );
}
return false;
} );
$( document ).tooltip( {
items: '.bind_tooltip',
content: function() {
return $( this ).parent().find( '.tooltip' ).html();
},
position: {my: 'left top+10', at: 'center center'}
} );
Also I get this error:
Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'

Answer 1

Initialize the tooltip before using it anywhere else in the script. You better do it at the beginning of script.
var infowindow_options = {
content: '...<a class="bind_tooltip">...</a>...',
disableAutoPan: false,
maxWidth: 0,
alignBottom: true,
pixelOffset: new google.maps.Size( 10, 10 ),
zIndex: null,
boxClass: 'info_window',
closeBoxMargin: '10px 10px 0 0',
closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif',
pane: 'floatPane',
enableEventPropagation: true,
infoBoxClearance: '10px',
position: mrkr.position
};
google.maps.event.addListener( mrkr, 'click', function() {
infowindow ? infowindow.close() : '';
infowindow = new InfoBox( infowindow_options );
infowindow.open( map );
return false;
} );
$( document ).tooltip( {
items: '.bind_tooltip',
content: function() {
return $( this ).parent().find( '.tooltip' ).html();
},
position: {my: 'left top+10', at: 'center center'}
} );
google.maps.event.addListener( map, 'click', function() {
if( infowindow ) {
infowindow.close();
$( '.bind_tooltip' ).tooltip( 'close' );
}
return false;
} );

Answer 2

Initializing tooltip at the beginning didn't solve my problem. So I've solved the problem this way. I've added earlier a block of code that when click on map the infowinfow should close. That's why I was loosing my infowinfow reference. So removing the auto close solved my problem.