課題：ページスクロールしていたら突然のGoogleMaps！

これよくあるんですが、スクロールしてたらGoogleMapsがでてきてめちゃくちゃ拡大された挙句にMapより下のほうにスクロールするのがなかなかできなくて辛いやつ。この挙動が本当に嫌ですね。

原因：pointer-eventsが実行されるから

GoogleMapsの上に来たらmapのスクロール=拡大が実行されるから、スクロールがそこで止まるわけです。
つまりこれを無効にすればいいわけですが、かといって完全に無効にしてしまうと、GoogleMapsの操作ができなくなります。

解決方法：普段は無効にしておいて、Mapがクリックされたら有効にする

これです。
まぁググってたらCodePenで見つけたやつなんですが。

HTML

htmlでは、普通にiframeでGoogle Mapsを埋め込みます。

<div class="map-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3283.1142668573057!2d133.83069551568448!3d34.626552580453534!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3553fefe938e1f57%3A0x4bfdc7530c98965f!2z77yI5qCq77yJ44Oq44K-44O844Og!5e0!3m2!1sja!2sjp!4v1481695299705" allowfullscreen></iframe>
</div>

CSS(SCSS)

javascriptとcssの組み合わせが肝です。

.map-container {
  width: 100%;
  height: 450px;
  iframe {
    width: 100%;
    height: 100%;
    pointer-events: none; // これが肝。普段はnone
    &.clicked {
      pointer-events: auto; // iframe上でクリックされたらautoにするためのclass
    }
  }
}

JavaScript

今回はjQueryを使っていますが、別に使わなくても書けるくらいの量です。

$('.map-container').click(function(e) {
  // 地図上でクリックされたらpointer-eventsが使えるようにする
  $(this).find('iframe').addClass('clicked');
}).mouseleave(function(e) => {
  // 地図上からマウスカーソルが外れたらpointer-eventsをnoneにする
  $(this).find('iframe').removeClass('clicked');
});

es2015を使っている場合はこちら。

es2015

$('.map-container').click((e) => {
  // 地図上でクリックされたらpointer-eventsが使えるようにする
  $(e.target).find('iframe').addClass('clicked');
}).mouseleave((e) => {
  // 地図上からマウスカーソルが外れたらpointer-eventsをnoneにする
  $(e.target).find('iframe').removeClass('clicked');
});

まとめ

cssでpointer-eventsというプロパティを使って制御できるの知らなかったので勉強になった。

参考URL

Google Maps iframe embed disable scroll to zoom | CODEPEN