CODEWITHSUNDEEP
google-maps
Zack
Zack

Reputation: 385

Google maps markers, close infobox when the mouse leaves the marker and infobox

I want the infobox to be closed when the mouse leaves the marker and infobox area. The problem is that the way I'm trying to check if the mouse is over the infobox doesn't work.

EDIT: This is the function I'm using know:

google.maps.event.addListener(marker, 'mouseout', (function(marker, contentString) {
        return function() {
            ib.close();
        };
    })(marker, contentString));

Upvotes: 1

Views: 2375

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

First of all, your infobox overlaps the marker, so once it opens it will cause a mouseout on the marker, and that will immediately close it.

So you need to also add events to the infobox element.

You can do that on the domready event of the infobox, as it is dynamically added to the DOM. And then you need to put a delay on the mouseout event of the marker which you will clear if the user mouseenters the infobox.

Something like this

var ibTimeout;
google.maps.event.addListener(marker, "mouseover", function (e) {
    ib.open(theMap, this);
});
google.maps.event.addListener(marker, "mouseout", function (e) {
    ibTimeout = setTimeout(function(){
        ib.close();
    }, 50);
});
google.maps.event.addListener(ib, 'domready', function(e){
     $('.infobox').on('mouseenter', function(e){
         clearTimeout(ibTimeout);
     }).on('mouseleave', function(e){
         clearTimeout(ibTimeout);
         ib.close();
     });
});

Demo at http://jsfiddle.net/gaby/t4cPt/39/

Upvotes: 4

Mir Shakeel Hussain
Mir Shakeel Hussain

Reputation: 517

google.maps.event.addListener(marker, 'mouseout', (function() {        
          infowindow.close();
});

google.maps.event.addListener(infowindow, 'mouseout', (function() {        
           this.close();
});

Upvotes: 0

Related Questions