Google Maps がスクロール時に邪魔にならないために

スワイプ時に、Google Mapsを意図せず操作してしまってページのスクロールが先へ進まずに困る…。
これが解消されたのは、まだ記憶に新しいところ。

スマホ閲覧時のGoogle Mapsが使いやすくなった!

スワイプ中の指がGoogle Mapsに触れると、「地図を移動させるには指2本で操作します」と地図上に表示され、地図が意図しない挙動(地図がスクロールするなど)をしないようになりました。

20170116_img

2016年11月25日 Google Cloud Japan 公式ブログで、Google Maps APIの仕様変更に関する記事が紹介されています。

米国時間 11 月 15 日、Google はマップを埋め込んでいるサイト向けに、直感的なスクロール操作が行える機能を導入し、モバイル デバイス上でフルスクリーン コントロールをデフォルトで表示するようにしました。これにより、ユーザーはモバイル ブラウザ上でのマップ操作をより直感的に行え、フラストレーションを感じることも少なくなるはずです。

【参考】
▼Google Maps API 新機能:スマートなスクロール機能をモバイル ウェブ マップに導入
https://cloud-ja.googleblog.com/2016/11/google-maps-api_25.html

 

この嬉しい仕様変更は、Google Maps JavaScript API に「gestureHandling」というオプションが新たに追加されたことによるもの。

今まで大問題ではないけれど、少しやりづらかった部分が解消されましたね。
個人的にもスマホで閲覧中、Google Mapsがでてくると無意識に画面の端をスワイプする癖がついてました。

ここまではいいのですが、じゃあ、

パソコン閲覧時のGoogle Mapsは?

と、思いました。

パソコンで見るGoogle Mapsはどうなの?

パソコンで見るGoogle Mapsも、スクロール中にGoogle Mapsにさしかかると意図せず地図が拡大され、とても煩わしいですよね。
解決方法は既にいくつかあり、

  • Google Maps API を使う(このサイト内の関連ページへ
    var myOptionsの項目で
    scrollwheel: false /*ページスクロール中のマウスに反応させない*/を追記すればOK
  • iframeの場合は、style="pointer-events:none;" を使う
    ※これは地図がそもそも動かなくなるのでNG
  • iframeの場合、一度クリックすれば地図が操作できるようにjQueryでカスタマイズ

といった選択肢があります。
パソコン閲覧時の場合、スマホ閲覧時ほどの困り感はないですが、
かゆい所に手が届くカスタマイズではないでしょうか。

 

【参考サイト様】
http://itstudio.co/2016/05/31/5802/
http://blog.ddwnet.com/archives/1213.html