Question

I have one map and one marker on it. When i go with my mouse over the marker an infobox appears. What I want to do is that when I leave with my mouse (mouseout) the infobox to disapear, but only in case the mouse didn’t go over the infobox. If the mouse went over the infobox I want the infobox to remain visible until I move my mouse of of the infobox.

So, as long as my mouse stays either on the marker or on the infobox, it should be visible, and when I leave them the infobox must disapear.

Thanks in advance

Answer 1

very simple, actually.

• attach a mouse event handler to your marker
• attach a domready event handler to your infowindow
• create a div inside your infowindow and attach a mouse event handler to it

what i did:

• added a timer to close the infowindow after a few seconds unless there is a mouse over it

some code:

google.maps.event.addListener(marker, 'mouseover', function () {
    infowindow.open(map, marker)
});

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

google.maps.event.addListener(infowindow, 'domready', function () {
    $('#infodiv').on('mouseenter', function () {
        clearTimeout(t);
    }).on('mouseleave', function () {
        t = setTimeout(function () {
            infowindow.close()
        }, 1000);
    })
});

see it working here: http://jsfiddle.net/RASG/vA4eQ/