Google Mapのスクロールを止める方法 | IT工房

Google Map共有機能の「地図を埋め込む」を使って、サイトにMapを表示する場合iframeが使用されます。
簡単に導入することができて便利に使えますのでさまざまなサイトで活用されています。

ところが、ひとつ問題点があります。スクロールをするときにMapの上にマウスのカーソルが重なった場合です。
Mapに重なった状態でスクロールを行うと、ページ全体の移動ではなくMapの拡大縮小やMapの移動が実行されます。

最近の長いページではページ全体の移動は頻繁に行われ、Mapにかかるとストレスを感じたりします。
できれば、スクロールでのMapの拡大縮小機能を止めておきたいものです。けれども、そのままでは今度はMapの拡大縮小の時に不便になります。

今回はjQueryを使用して対策を行いました。
初期状態ではスクロールを行ってもMapの拡大縮小は行わないものとして、Mapの拡大縮小をスクロールで行う場合のみ一度Mapをクリックすると可能にするようにしました。

HTMLのスクリプト

<div id="access">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12954.367755608568!2d139.6983226695433!3d35.736252981345366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601892a0a5585c27%3A0xb420ac39f1dc62ba!2z44CSMTcwLTAwMTQg5p2x5Lqs6YO96LGK5bO25Yy65rGg6KKL!5e0!3m2!1sja!2sjp!4v1464584828937" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>

jQueryのスクリプト

$(function() {
        var map = $('iframe');
        map.css('pointer-events', 'none');
        $('#access').click(function() {
            map.css('pointer-events', 'auto');
        });
        map.mouseout(function() {
            map.css('pointer-events', 'none');
        })
    })

コメント