Google Maps iframeでホイールスクロールを無効

デジタルドリームワークスから比嘉です。
たぶん「こんなの知ってるよ!」というくらい、ちょっとしたメモです。

ホームページにGoogle Mapsを組み込むことは多々あります。
Google Maps APIを使用すればよりカスタム性は上がりますが、そこまでは…
という方にはGoogle Mapsの「共有」から組み込みコードを取得してコピペで簡単に導入出来ます。

Google Maps 非常に便利ですが、少し気になる部分も出てきます。
ページの表示速度が遅くなること。そしてページをスクロールする際にマップの上引っ掛かることがあります。
実際に試して下さい。

 

 

スクロール中にマップにさしかかると、マップのズームが反応してスクロールの妨げになります。
PCの場合はカーソルをマップからずらせば問題ないですが、スマホとかだと画面一杯に表示されていて面倒だったりもします。
Google Maps APIで回避する方法は以前から知っていましたが、iframeでも簡単に回避できるようです。

ちなみに、Google Maps APIでは、以下のようにマウスホイールのオプションを付与することで回避出来ます。

scrollwheel: false

 

[javascript]

[/javascript]

 

そしてGoogle Maps iframeの場合は、こちらもめちゃくちゃ簡単でした 笑
iframeのスタイルに、pointer-events無効のスタイルを入れるだけ。

pointer-events: none;

 

[html]

[/html]

 

 

スクロールがマップにさしかかってもズームが回避されてスムーズにスクロール出来ると思います。

 

—–

 

ここ数年はスマホ、タブレットに対応したサイト制作が増えましたね。
今年もサイト制作の上でスマホやタブレット対応は必須、重要となってきますが、
さらにスマホでもより使いやすいサイト設計へとステージアップ、レベルアップしていきたいと思います。
今年もどうぞよろしくお願い致します!

「Google Maps iframeでホイールスクロールを無効」への2件のフィードバック

  1. pointer-events: none;を入れると、拡大地図を表示や保存などが聞かず、googleMapである意味が全くなくなるので全然ダメだと思いました。

  2. 通りすがりですさん、コメント有り難うございます。ご返信が遅くなり大変申し訳ございません。
    私も操作をしていて感じましたが、本当にその通りですね。やはりその指定だけではGoogleMapの意味が無くなってしまいます。
    APIを利用して埋め込む方が良いのか、スクロールし易い様に左右に少しスペースを取るのか色々検証をして答えを出したいと思います。
    他の皆さんはどういう方法が良いと感じているか。コメントいただけると嬉しいです m(_ _)m

コメントは停止中です。