マウスホイールによるズーム機能

KsGMap に関係なく、Google Maps API を用いた地図にそのまま組みこめる Tips です。

マウスのホイール（ボタンの真ん中のぐりぐり回すヤツ）で、マップの尺度を変更します。
KsGMap や はてなマップ と同じように奥へ回転させる拡大、手前に回転させると縮小します。

サンプル

//マウスホイールのイベントを追加

if( navigator.userAgent.match( "MSIE" ) ){ document.getElementById( "map" ).attachEvent( "onmousewheel" , mouseWheelZooming ); }

if( navigator.userAgent.match( "Gecko" ) ){ document.getElementById( "map" ).addEventListener( "DOMMouseScroll" , mouseWheelZooming , false ); }

if( navigator.userAgent.match( "Safari" ) ){ document.getElementById( "map" ).onmousewheel = mouseWheelZooming; }



//□マウスホールによるズーム処理

function mouseWheelZooming( event ){

//マウスホイールの上／下の取得と、スクロールのキャンセル

if( navigator.userAgent.match( "MSIE" ) ){ var delta = event.wheelDelta; event.returnValue = false; } //IE

if( navigator.userAgent.match( "Gecko" ) ){ var delta = event.detail * -1; event.preventDefault(); } //Gecko

if( navigator.userAgent.match( "Safari" ) ){ var delta = event.wheelDelta; event.returnValue = false; } //Safari



//ズーム処理

map.zoomTo( map.getZoomLevel() + ( delta < 0 ? 1 : -1 ) );

}

document.getElementById( "map" )… の map は Googleマップを表示する divタグの id属性値を、

map.zoomTo( map.getZoomLevel()… の map は、GMap を定義する var map = new GMap( … の変数名を入れてください。
初期値のままの場合は、変更する必要はありません。

（この文章は、KsGMapオフィシャルサイトのTipsにも掲載しています）