☰

埋め込まれたGoogleマップでマウスのスクロールホイールズームを無効にする 質問する

tag-icon • tag-icon google-maps scrollwheel
埋め込まれたGoogleマップでマウスのスクロールホイールズームを無効にする 質問する

私は WordPress サイトで作業していますが、このサイトのほとんどの投稿では、作成者が iFrame を使用して Google マップを埋め込んでいます。

Javascript を使用して、マウスのスクロール ホイールによるズームをすべて無効にする方法はありますか?

ベストアンサー1

私も同じ問題を抱えていました。ページをスクロールしてポインターが地図上になると、ページのスクロールが継続されるのではなく、地図の拡大/縮小が始まります。:(

そこで、各 gmap 挿入の直前に とdivを配置してこの問題を解決しました。次を参照してください。.overlayiframe

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

CSS で次のクラスを作成しました:

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

div はマップを覆い、ポインター イベントがマップに到達できないようにします。ただし、div をクリックすると、ポインター イベントに対して透過的になり、マップが再びアクティブになります。

お役に立てれば幸いです :)

おすすめ記事