シングルページのサイトなどで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オプションを追加するだけ。
お店や会社の場所を表示してるとかで予期せぬスクロールでどこ?ってならないように地図上でマウスホイールでスクロールが発生しそうなデザインの時はこのオプションを使用するのがユーザビリティ的にも良いかなぁと思います。
[参考]
- Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers
- scrollwheel - ホイール操作でのズーム値の変更
- マウスホイールによるズーム操作の有効/無効 - 地図に対する操作の設定 - Google Maps API入門
Logicool ロジクール MX1500 MXAnywhere2 ワイヤレスモバイルマウス BluetoothSmart・USB接続 Windows/Mac OS 対応
- 出版社/メーカー: ロジクール
- 発売日: 2015/07/16
- メディア: Personal Computers
- この商品を含むブログを見る