CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
snnlankrdsm
snnlankrdsm

Reputation: 1401

Cancel a Google Maps V3 InfoWindow close event when the user hovers over the InfoWindow

I want to close infowindow when user mouse out infowindow. However, in the below code even if i put my mouse on infowindow, it closes in 5 secs. Is this bug or there is another solution for that?

var info = new google.maps.InfoWindow({
        content: '<div>Loading...</div>'
});



var bindMarker = function(marker, attr, feature)
{   

    google.maps.event.addListener(marker, 'mouseover', function(clicked) {
            info.setContent(self.createInfoWindowFor(marker, attr, feature));
            info.open(self.map, marker);
    });

    google.maps.event.addListener(marker, 'mouseout', function(){
        setTimeout(function(){info.close(self.map, marker);}, '5000');
    });

    google.maps.event.addListener(marker, 'click', function(clicked) {
            info.close(self.map, marker);

    });

};

Upvotes: 0

Views: 896

Answers (2)

guest
guest

Reputation: 11

If I understand correctly, you are using the setTimeOut to have time to put the mouse over the infowindow, so it doesn't close on mouseout of the marker.

Intead of using mouseout of the marker try mousemove of the map. In this way if you put the mouse over the infowindow the event mousemove doesn't fire and can put the mouse over the infowindow whithout closing it. But when you move over the map, the infowindow will close.

google.maps.event.addListener(map, 'mousemove', function (event) {
    infowindow1.close();
});

Upvotes: 1

brokethebuildagain
brokethebuildagain

Reputation: 2191

From what I understand, your code is working fine, you just want to stop the infowindow from disappearing if you mouseover the infowindow.

To do this, you need to create a global variable for the Timeout ID (see https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.clearTimeout) for the timeout function, so in the top of your code:

var infoTimeoutID = null;

Then you need to set the Timeout ID when you call setTimeout like this:

        infoTimeoutID = setTimeout(function(){info.close(self.map, marker);}, '5000');

Then you want to add a mouseover listener to your infoWindow when it is displayed that looks something like this:

function() {
    if(infoTimoutId != null) {
        window.clearTimeout(infoTimeoutID);
    }
}

You'll also need to add a mouseout handler that closes the infoWindow (if desired).

Upvotes: 0

Related Questions