コーディング

Google Mapの埋め込みコードでマウスホイールのスクロールをオフにする方法

2016.11.07

2017.05.29

地球儀を指さす教師

Webサイトに地図を表示するのにGoogle Mapは非常に便利です。Google Mapで表示したい場所の住所を検索して共有の中の埋め込みコードをコピー&ペーストするだけで好きなところに地図を表示できます。

Google Mapの埋め込みコードは以下のような構造になっています。

<iframe src="地図を表示する場所のURL" width="横幅" height="高さ" frameborder="0" style="border:0" allowfullscreen></iframe>

この埋め込みコードに『pointer-events:none;』をstyleに追記することでスクロールを含むマウスイベントがオフにできます。

<iframe src="地図を表示する場所のURL" width="横幅" height="高さ" frameborder="0" style="border:0; pointer-events:none;" allowfullscreen></iframe>

注意点としてはデフォルトでは『border:0』には『;』が付いていませんので追記が必要です。またGoogle Map上でのすべてのマウス操作がオフになってしまうので状況に合わせて設定してください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。