概要
マウスのホイール（ボタンの真ん中のぐりぐり回すヤツ）で、マップの尺度を変更する Tips です。
奥へ回転させる拡大、手前に回転させると縮小します。
対応ブラウザ／ツール
ブラウザ
動作するブラウザは下記の通りです。
| IE |
Firefox |
Netscape |
Opera |
Safari |
| ○ |
○ |
○ |
× |
○ |
ツール等
このスクリプトがそのまま使えるツールは下記の通りです。
サンプル
Google Maps API の APIキー取得時のソース※に 当Tips を搭載したものです。
※ UTF-8のメタタグなど一部編集を加えています。
ソース
下記のソースはコピーしてもタブが消えてしまっているので、上記サンプルのソースからコピーした方がいいです。
//マウスホイールのイベントを追加
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( … の変数名を入れてください。
初期値のままの場合は、変更する必要はありません。
Google Maps Editor の場合は map を gme_map に書き換えてください。
注意
情報ウィンドウでスクロールバーが表示する場合、それをスクロールしようとしてもマップがズームしてしまいます。
情報ウィンドウが開いている場合にフラグを立てて、この機能を動作しないようにしておくといいでしょう。
