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

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

googlemapAPIでマウスホイールによるズームの動きが邪魔？

googleマップをWebサイトに設置した時、マウスホイールでズームさせたりすると、コントローラーでいちいち動かさなくても楽ちんです。ですが、ブラウザをマウスホイールでスクロールしていった時にマップにあたると、ブラウザのスクロールが止まってしまいマップがズームされてしまうなんて事があります。
ホイールでのズームは楽ですが、デフォルトの表示を大きめにしておけばさほどホイールで動かく事も少ないのではないでしょうか。
zoom：1；くらいから引いた表示で見る事なんてほぼ必要ないでしょうし、ホイールをグリグリしまくる程ズームする事も現実あまりありません。
ですので、マウルホイールによるズームが不要の場合は動きを無効化しちゃいましょう。

サンプルはこちら

マップの設置方法

マップの設置方法は以前の記事を確認してください。

Googleマップをブラウザ全部に表示する方法

javascript全体

以下のソースをhead内に記述します。
ソースはマップの表示設定のみをしています。


<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>