コーディング

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

2017.04.11

2017.05.11

スクロール

ゆっくり読みたいのはやまやまなのですが社会人は忙しいので、やむなくサイトのページスクロールをホイールで勢い良く転がして飛ばし読み、そういうときありますよね?
そういうときに限って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環境他の方法での使い勝手も、追求してみる余地がまだありそうですね。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。