読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

GoogleMaps マウスホイールでのズームしないようにしたい。

シングルページのサイトなどで100%幅でGoogleMapsを表示させるような時、マウスホイールで地図がズームしてしまうと不都合があるので、地図のマウスホイールでのズーム機能をOFFにするメモ。

scrollwheel オプションを使用する。

マウスホイールでのズーム機能はscrollwheelオプションを付けてmapオブジェクトを作成することで変更が可能です。

  • true: マウスホイールでのズーム有効 (デフォルト値)
  • false: マウスホイールでのズーム無効

サンプルコード

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(60.1500745,24.978537),
    zoom: 13,
    // disables scrollwheel zooming on the map
    scrollwheel: false
  };
  // Create GoogleMap
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

See the Pen google map customize by KIKIKI (@chaika-design) on CodePen.

さすがGoogleオプションを追加するだけ。
お店や会社の場所を表示してるとかで予期せぬスクロールでどこ?ってならないように地図上でマウスホイールでスクロールが発生しそうなデザインの時はこのオプションを使用するのがユーザビリティ的にも良いかなぁと思います。


[参考]