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]

 

 

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

 

—–

 

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