Google Mapsのホイール拡大縮小 スクロールしないで

Google Mapsをマウスに付いているホイールで拡大縮小できると気持ち良い。GMap2オブジェクトに対しenableScrollWheelZoomメソッドを使えば、ホイールで拡大縮小ができるようになる。だけど、ページも同時にスクロールしてしまうことが問題だった。

調べてみたけど、なかなか難しい。結局、どこかの掲示板でMapping Application & Data Entry @ Woodrow Wilson School, Princeton Universityというのを見つけた。ホイールで拡大縮小しつつ、ページスクロールしていない！掲示板では、この作者が「ホイールで拡大しようとすると一段階ではなく二段階拡大してしまう」と助けを求めていた。ソースを見れば直ぐ分かる通り、enableScrollWheelZoomで一段階拡大し、さらに自分のオリジナルコードで一段階拡大している。きちんと掲示板では誰かが指摘していたけど、まだ治っていない。不思議。

何はともあれ、エッセンスは下のソースの通り。GoogleMaps上でのホイールを回すイベントはGEvent.addDomListenerでゲットして、ウィンドウに対しては無効化しちゃう。

実装してみるとやっぱり気持ち良い！Google Maps本体でも実装しないのかな？

<div id="wheelMap" style="width:500px;height:200px;"></div>
<script>
  var map = new GMap2(document.getElementById("wheelMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);

  map.enableScrollWheelZoom();  
  map.enableContinuousZoom();


  GEvent.addDomListener(document.getElementById("wheelMap"),
     "DOMMouseScroll", CancelEvent); // Firefox
  GEvent.addDomListener(document.getElementById("wheelMap"),
     "mousewheel",     CancelEvent); // IE


function CancelEvent(event)
{
  e = event;
  if (typeof e.preventDefault  == 'function') 
        e.preventDefault();
  if (typeof e.stopPropagation == 'function')
        e.stopPropagation();
  if (window.event) {
     window.event.cancelBubble = true; // for IE
     window.event.returnValue = false; // for IE
  }
}
</script>