ブログにGoogleマップを埋め込みたい時ってありますよね？ 場所を紹介したい時とか。
任意の場所にピンを立てて、ブログに埋め込む方法は別のページで紹介していますが、今回は、埋め込んだGoogleマップのスクロールを止める（動かなくする）方法を紹介します。
今から少し能書きを垂れますので、「そんなのどうでもいいから早くやり方教えろよ」という方は下の目次から、飛んでください。
なぜ止める必要があるのか
どうしてスクロールを止める必要があるのかと言いますと、パソコンでブログを読んでいる場合、だいたいマウスのクイックホイールで下にスクロールしますよね？マウスに付いてるクルクルするヤツです。
それでスクロールしている時に丁度マウスポインターがGoogleマップに差し掛かると、ページのスクロールが止まってグーグルマップの方が拡大されたり縮小されたりします。
特にスマホだと、画面いっぱいにマップが配置されていると、スクロールしたくてもマップ内だけがスクロールして、続きが読めない・・・ なんて事があると思います。
あれ、読んでる側からすればかなり「うっとおしい」ですよね？「あぁ詰んだわ・・・」って必至に横の方をスライドしてみたり。
だから、読んでくれている人の気持ちを考えるとスクロールは止めた方がユーザーフレンドリーなわけですね。
つまり、Googleマップの動きを止めることは、バファリンのようなモノなのですよ。半分は優しさでできているんです。
完全に止めてしまうと不便なことも
はっきり言って、止めてしまうだけならメチャクチャ簡単です。
埋め込みコード（iframe)のstyle部分に
pointer-events:none;
と追加してやれば動きは止められます。詳細に書くと下のようになります。
<iframe width="600" height="450" style="border: 0; pointer-events:none;" src="https://www.google.com/maps/..." frameborder="0" allowfullscreen="allowfullscreen"></iframe>
style="border: 0; pointer-events:none;"の部分ですね。
これだけで動きは止まるのですが、逆に動かしたい時に動きません。これが不便な時もあるんですよ。
その範囲しか見れない
動きが止められる反面、動かしたい時にも動きません。つまり、マップに表示されている情報だけで位置を特定しなくてはイケないので、不便です。
便利だと思ってわざわざマップを埋め込んでいるのに、それがどこなのかわからなければ意味が無いですよね？特に田舎の地図だと、周り田んぼばっかで目印になる情報が表示されていない可能性も大いにあります。
なので、基本は動きを止めておいて、動かしたい時だけ動かす。これが理想的なわけです。
やり方
この方法は上で書いたような完全に動きを止める方法のように簡単ではありません。ですが難しくもないので、コピペしてもらえればOKですよ。
HTML
<div class="gmap"><iframe width="600" height="450" style="border: 0;" src="https://www.google.com/maps/..." frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
まずこのように【 gmap 】（任意）というクラスで埋め込みコードを囲んでやります。
CSS
.gmap iframe {
pointer-events:none;
}javascript
<script>
$('.gmap').click(function(){
$('.gmap iframe').css("pointer-events","auto");
});
</script>これで完了です。CSS・scriptはコピペでOKです。
次回以降、Googleマップを埋め込む際、【 gmap 】というクラスで囲んでやれば機能します。逆に機能させたくない場合は、【 gmap 】のクラスで囲まなければ、普通にスクロールするマップが埋め込めます。
一応解説
一応何が起きているのかの解説をしておきます。
まず、CSSで “gmap” クラス内にあるiframeのポインターイベントを停止します。まぁ埋め込みコードに直接書いてるのと同じ原理ですね。
次にJavaScriptで、 “gmap” クラスの要素をクリック（タップ）すれば、CSSで停止させていたポインターイベントが動き出すというコードを書いています。
つまり、マップ上でクリックすれば動かせうようになるということです。
まとめ
意外と簡単だったでしょ？まるっぽコピペでも動きますよ。
これで、基本はスクロールしないけど、動かしたい時には動かせる便利なグーグルマップが埋め込めるようになりました。
ぜひやってみてください。
