埋め込みGoogle Mapをスクロールさせないようにする

横幅100%の地図を掲載しているサイトは多いですよね。
しかしマウスホイールでスクロール中にカーソルがGoogleMapの中に入るとMapがの拡大縮小されてしまいスクロールできなくなります。

APIを使って制御するやり方が有名ですが、埋め込みGoogleMapも制御することができます。
ホントはAPI使うのがオススメです。いろいろカスタマイズできるし。

iframeにpointer-events:noneをかけると、マウスイベントを無効にできます。
ただ、それだけだとGoogleMapの機能(スクロールとか拡大縮小)が使えませんので、jQueryでマップをクリックしたときに一時的にマウスイベントを有効にしています。

▼APIを使ったカスタマイズはこっち
Google Maps APIを使って地図をカスタマイズする

HTML

js(jQuery)

CSS

デモページ

▼APIを使ったカスタマイズはこっち
Google Maps APIを使って地図をカスタマイズする

  • コーダーのための計算機