Prevent Google Maps from scrolling with mouseover (mouse wheel actions)

+2 votes
318 views
asked Sep 1, 2016 in General by Mattew Rice

While in the area with an embedded maps iframe using a trackpad or mouse, we get stuck inside the Maps' zooming capabilities by default (automatically), which is really annoying.

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

Is there a way to disable this?

1 Answer

+1 vote
answered Sep 1, 2016 by Samuel

What to do is to 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.

solution does not work for IE<11, because pointer-events is not supported.

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>

Related questions

0 votes
1 answer 377 views
asked Aug 2, 2016 in Modules by Boforce
0 votes
1 answer 210 views
asked May 26, 2016 in General by Cyan
0 votes
2 answers 336 views
asked May 23, 2016 in General by Wilf
+2 votes
1 answer 108 views
asked Feb 9 in General by Marc Lentin
0 votes
1 answer 492 views
0 votes
1 answer 49 views
asked Aug 19, 2016 in General by Azi Graeber
...