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

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

マウスホイール

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

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

サンプルはこちら

マップの設置方法

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

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>

無効化のソース

無効化のソースのみ取り出しました。
この部分を追加し「false」にする事でマウスホイールでのズームを無効化しています。


scrollwheel: false 

設定完了

設定はこれだけで終了です。
googleMAP APIは細かい設定が可能ですが、その分覚えていられない事も多いです。
設定の一覧も作っておくと便利です。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket