rebelliard rebelliard - 4 months ago 44
jQuery Question

Prevent a Google Maps iframe from capturing the mouse's scrolling wheel behavior

If you're browsing with an embedded maps iframe using your trackpad or mouse, you can potentially trap yourself into the Maps' zooming capabilities, which is really annoying.

Try it here: https://developers.google.com/maps/documentation/embed/guide#overview

Is there a way to prevent this?

Answer

This has been answered here => Is it possible to disable mouse scroll wheel zoom on embedded Google Maps? by Bogdan. What it does is that it will disable the mouse until you click onto the map and the mouse start working again, if you move the mouse out from the map the mouse will be disabled again.

Note: Does not work on IE < 11 (Working fine on IE 11)

CSS:

<style>
    .scrolloff {
        pointer-events: none;
    }
</style>

Script:

<script>
    $(document).ready(function () {

        // you want to enable the pointer events only on click;

        $('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas1').on('click', function () {
            $('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
        });

        // you want to disable pointer events when the mouse leave the canvas area;

        $("#map_canvas1").mouseleave(function () {
            $('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
        });
    });
</script>

HTML: (just need to put correct id as defined in css and script)

<section id="canvas1" class="map">
     <iframe id="map_canvas1" src="https://www.google.com/maps/embe...." width="1170" height="400" frameborder="0" style="border: 0"></iframe>
</section>
Comments