Google Mapsを埋め込んだ時に、スマートフォンでスワイプに反応しないようにする

スマートフォンサイトに大きいサイズのGoogle Mapsを埋め込んだ時、タップにGoogle Mapsが反応してスクロールがうまくできない時の対応方法をメモ。

サンプルコード

まずは普通に埋め込んだ場合のサンプルです。

HTML

<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d51823.956492280035!2d140.7825467!3d35.7262854!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6023229be70545ef%3A0xb40db688abe07d5!2z5riF5bed55S656ys77yR5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1459501847683" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

通常の埋め込みのデモページ
　

サンプルコード2

Google Mapsに対してpointer-events: none;を指定することで、タップ時に反応しなくなります。

CSS

#map {
	pointer-events: none;
}

タップに反応しないように変更したデモページ
レスポンシブサイトの場合は、Media Queriesでスマホサイズにだけ適用するといいかもしれません。
　

【参考サイト】

• Googleマップの上でのスクロール動作を無効にする | hacknote