埋め込みgoogleMapのホイールスクロールを停止しつつ、必要なときには動作させる方法

ゆっくり読みたいのはやまやまなのですが社会人は忙しいので、やむなくサイトのページスクロールをホイールで勢い良く転がして飛ばし読み、そういうときありますよね？
そういうときに限ってgoogleMapの拡大縮小にホイールが引っかかってちっともページをスクロールできなくなる、そういうときありますよね？

今回はそんなgoogleMapの挙動を止めることで解決しつつ、「地図だしやっぱり周辺を拡縮できないと困る…」というときの解決策を、合わせて紹介します。

googleMapを止める＆クリックで動かす

まずはスクロールを止める方法です。こちらは簡単で、cssに一行書き足すだけです。

.gmap iframe {
pointer-events:none;
}

一行書き足すと、マウススクロールやドラッグでの操作を無効化することができます。

しかしこのままでは「最寄り駅がみたいけどスクロールできなくて線路の先が見えない」なんてときに操作のしようがありません。
それを解消するために、次の工夫をしてみます。

javascriptでクリックされたgoogleMapの操作をアクティブに

さきほどと同じ方法でgoogleMapの操作を普段は止めておきつつ、javascriptでアクティブな状態を呼び出せるようにします。
コードは以下になります。

<script>
$('.gmap').click(function(){
  $('.gmap iframe').css("pointer-events","auto");
});
</script>

上記のjsによって、動かないgoogleMapがクリックでアクティブに戻ります。

スマートフォン環境では二本指操作でないとスクロールしなくなるなど、対策が講じられてもいるgoogleMap。
PC環境他の方法での使い勝手も、追求してみる余地がまだありそうですね。