Blog

HOME > Web > Wordpress > 固定ページ > 【CSS】Google Mapのiframeでのスクロールを無効にする

【CSS】Google Mapのiframeでのスクロールを無効にする

2016/03/01

固定ページ Wordpress css スマートフォン

個人で、食！相模原というサイトを制作・運営しています。

PCはいいのですが、スマホでGoogle Mapを表示したときに、
スワイプで地図が動いてしまうのが問題だなと思い、
Google Mapのスクロールを無効にする修正をしました。

参考サイト
Googleマップの上でのスクロール動作を無効にする

いろいろと検索したところ、
apiの修正は結構ヒットするのですが、
肝心のiframeでの修正方法が見つからず、
「Google Map iframe スクロール無効」でやっと見つかったのが下記のサイトです。

上記のサイトを参考に、
iframeの記述の中に「style="pointer-events:none;"」を追加しました。

<div id="gmap">
    <iframe width="630" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=<?php echo get_post_meta($post->ID,'shop_address',true); ?>&amp;z=14&amp;output=embed" style="border:0;pointer-events:none;"></iframe>
</div>

しかし、適用してみるとPCも固定化されてしまいました。

そこで、CSSで指定することにしました。

解像度769px以下の場合（タブレット）、gmapのiframeで適用することに。

@media screen and (max-width: 769px) {
    #gmap iframe{
        pointer-events:none;
    }
}

これで、PCの場合はGoogle Mapのスクロールが有効になりました。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ