マウスオーバーでGoogleマップのサイズを変更する

Question

ユーザーが地図の小さなバージョンを移動したときにGoogleマップのサイズを変更したい。

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); 
}); 

HTML要素だけで単純な<div>

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

以上のクラスでの問題は、私は、マップナビゲーション要素を置くとマウスアウトイベントもトリガされていることですより大きなビューのためにいくつかのスタイルを追加します。 jQuery UIのアニメーション化されたクラス変更を使用してアニメーション化されています。

Answer 1

マップの包含divにバインドしたmouseenterとmouseleaveを試しましたか？マップオブジェクトのイベントリスナーとしてmouseout/mouseoverではなくそのようにしましたか？

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