埋め込みGoogle Mapをスクロールさせないようにする
横幅100%の地図を掲載しているサイトは多いですよね。
しかしマウスホイールでスクロール中にカーソルがGoogleMapの中に入るとMapがの拡大縮小されてしまいスクロールできなくなります。
APIを使って制御するやり方が有名ですが、埋め込みGoogleMapも制御することができます。
ホントはAPI使うのがオススメです。いろいろカスタマイズできるし。
iframeにpointer-events:noneをかけると、マウスイベントを無効にできます。
ただ、それだけだとGoogleMapの機能(スクロールとか拡大縮小)が使えませんので、jQueryでマップをクリックしたときに一時的にマウスイベントを有効にしています。
▼APIを使ったカスタマイズはこっち
Google Maps APIを使って地図をカスタマイズする
HTML
<div class="map_wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3853.6174816325843!2d139.68903100767835!3d35.689480848976224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1484180616959" width="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>js(jQuery)
$(function() {
var map = $('iframe');
//あらかじめiframeにpointer-events:noneを掛け、マウスイベントを無効にしておく
map.css('pointer-events', 'none');
//一度クリックされたらマウスイベントを有効にする
$('.map_wrapper').click(function() {
map.css('pointer-events', 'auto');
});
//iframeからマウスが離れたら再度pointer-events:noneを効かせる
map.mouseout(function() {
map.css('pointer-events', 'none');
});
})CSS
iframe {
width: 100%;
height: 400px;
}
.map_wrapper {
margin: 500px 0;
}▼APIを使ったカスタマイズはこっち
Google Maps APIを使って地図をカスタマイズする
