googleマップAPIを設置した時にマウスホイールでズームするのを無効化する方法

googlemapAPIでマウスホイールによるズームの動きが邪魔?
googleマップをWebサイトに設置した時、マウスホイールでズームさせたりすると、コントローラーでいちいち動かさなくても楽ちんです。
ですが、ブラウザをマウスホイールでスクロールしていった時にマップにあたると、ブラウザのスクロールが止まってしまいマップがズームされてしまうなんて事があります。
ホイールでのズームは楽ですが、デフォルトの表示を大きめにしておけばさほどホイールで動かく事も少ないのではないでしょうか。
zoom:1;くらいから引いた表示で見る事なんてほぼ必要ないでしょうし、ホイールをグリグリしまくる程ズームする事も現実あまりありません。
ですので、マウルホイールによるズームが不要の場合は動きを無効化しちゃいましょう。
サンプルはこちら
マップの設置方法は以前の記事を確認してください。 以下のソースをhead内に記述します。 無効化のソースのみ取り出しました。 設定はこれだけで終了です。マップの設置方法
javascript全体
ソースはマップの表示設定のみをしています。
<script>
function initialize() {
var latlng = new google.maps.LatLng(37.4220, -122.08491731);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
</script>
無効化のソース
この部分を追加し「false」にする事でマウスホイールでのズームを無効化しています。
scrollwheel: false
設定完了
googleMAP APIは細かい設定が可能ですが、その分覚えていられない事も多いです。
設定の一覧も作っておくと便利です。