Question

I want a Google map to resize when the user hovers over a small version of a map. Problem is that the mouseout event is also triggered when I hover the map navigation-elements:

JS:

google.maps.event.addListener(map, 'mouseover', function() {
        $('#map_canvas').addClass('over',200);
});
google.maps.event.addListener(map, 'mouseout', function() {
        $('#map_canvas').removeClass('over',200);
});

The HTML element is just a simple <div>

<div id="map_canvas"></div>

The over class just adds some styles for the bigger view. It’s animated using the jQuery UI animated Class changing.

Answer 1

Have you tried binding mouseenter and mouseleave to the containing div of the map and do it like that instead of mouseout/mouseover as an event listener on the map object?

$('#map').mouseenter(function() { 
/* add class */
 }).mouseleave(function() {
 /*remove class */ 
});