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

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上でのすべてのマウス操作がオフになってしまうので状況に合わせて設定してください。