グーグルマップのスクロールを無効にする

過去には、ホームページにアクセスマップに直接方向を描いて上げたが、今はほとんどのGoogleマップが使用されています。 グーグルマップ（Googleマップ）を利用すると便利に地図を挿入することができますが、多くの場合、スクロールの問題のためにイライラが出たり面倒な場合があります。 たとえば、次のような地図を挿入したときに、マウスを地図の上に上げた状態で、下にスクロールするためにホイールを回すと地図が拡大/縮小されている現象が表示されます。

状況に応じて、非常に便利かもしれないが意図しないスクロール動作のためにユーザが面倒な場合があります。 この場合、いくつかの方法を使用してGoogleマップ内でスクロールが動作しないようにすることができます。 jQueryも可能だろうが、CSSにすることが比較的簡単です。

<div class="map_wraper">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3163.983921264011!2d126.9009542!3d37.5318763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c9edc5801b12d%3A0x44937d2f43e0fa7!2z6rCV64Ko7LmY6rO8!5e0!3m2!1sko!2skr!4v1451398478458" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

上記のような形で、Googleマップのコードを挿入し、次のようなCSSコードをスタイルシートに追加します。

/* 구글 맵 스크롤 방지 */
.map_wraper{
position:relative;
}
.map_wraper:after{
background: none;
content: " ";
display: inline-block;
font-size: 0;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9;
}
// Source: stackoverflow

実際にテストしてみると

他の方法では、次のように単純なCSSコードでも可能です。

.map_wraper iframe {
pointer-events:none;
}

このコードを WordPressテストしてみたうまく動作しました。 このコードではなく、上で紹介したコードが多くの場合、よりうまく動作するようです。

メモ：

• ブログでは、Googleマップを挿入する方法
• 洞窟デ掲示板では、Googleマップを使用する