Google Maps InfoWindow and JQueryUI Tooltip issue

Question

Our site hosts a Google Map which has markers the user can click. When the marker is clicked an InfoWindow is shown with the details of that marker.

We also use JQueryUI tooltip on our site which works well for us.

Since the 3.34 update to Google Maps it looks like they changed the close button of the InfoWindow which now contains a title atribute, this is causing the JQuery tooltip to replace the standard tooltip, thats fine.

However when you click the close button of the InfoWindow the tooltip remains indefinitly on the screen.

See the JS Fiddle here: https://jsfiddle.net/yzep2jvu/

code

Run it then click the marker then click the close on the InfoWindow, the tooltip remains

Any Ideas?

Answer 1

I am experiencing this issue as well using Google Chrome and Google Maps 3.34 and 3.35 with jQuery UI. Not the best solution, but this solved it:

map.addListener('mousemove', function() {
    $("[role='tooltip']").remove();
});

Check out this fiddle: https://jsfiddle.net/pablobetes/jaoy4w2f/

Answer 2

Try to remove the tooltip on handle the closeclick event of the InfoWindow:

google.maps.event.addListener(yourInfoWindow, 'closeclick', function() {

    // Close jQuery ui tooltip related to the close button
    jQuery("[role='tooltip']").remove();
});