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

Question

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?

Solution 1

This has been answered here => 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>

Solution 2

I'm re-editing the code written by #nathanielperales it really worked for me. Simple and easy to catch but its work only once. So I added mouseleave() on JavaScript. Idea adapted from #Bogdan And now its perfect. Try this. Credits goes to #nathanielperales and #Bogdan. I just combined both idea's. Thank you guys. I hope this will help others also...

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Improvise - Adapt - Overcome

And here is an jsFiddle example.

Solution 3

yes, it is possible through scrollwheel:false.

var mapOptions = {
   center: new google.maps.LatLng(gps_x, gps_y),
   zoom: 16,//set this value to how much detail you want in the view
   disableDefaultUI: false,//set to true to disable all map controls,
   scrollwheel: false//set to true to enable mouse scrolling while inside the map area
 };

source

Solution 4

Is it possible to disable mouse scroll wheel zoom on embedded Google Maps?

Here is preety good answer. In my case it need to be fixed with jquery to work perfect. My code is:

HTML

<div class="overlay"></div>
<iframe src="#MAP_LINK#" width="1220" height="700" frameborder="0" style="border:0; margin-top: 20px;" ></iframe>

CSS

.overlay {
background:transparent; 
position:relative; 
width:1220px;
height:720px; /* your iframe height */
top:720px;  /* your iframe height */
margin-top:-720px;  /* your iframe height */
}

JQUERY

$('.overlay').click(function(){
$(this).removeClass('overlay');
});

Solution 5

I`ve created a very simple jQuery plugin to resolve the problem. This plugin automatically wraps the map with a transparent div and a unlock button, so you'll must longpress them to activate navigation. Check it at https://diazemiliano.github.io/googlemaps-scrollprevent/

Here's some example.

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);

Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

View more solutions

Comments

[Dr.Molle]

I'm afraid currently there is only 1 thing you can do: send a feature-request

[Sjoerd de Wit]

you could also put a div over it position absolute with a higher z-index and a transparent background

[Matt Wagner]

SjoerdDeWit's suggestion is browser friendly. In the event that you need to support older browsers. The only problem with this is that you lose interaction with the map. It's probably better to switch to the API to have more control over interactions.

[rebelliard]

But how do i indicate that to an iframe?

[rebelliard]

But how do i indicate that to an iframe?

[Tiago Duarte]

you should edit the map directly. if you cannot for some reason, you can use <iframe style="pointer-events:none"> (stackoverflow.com/questions/21992498/…)

[rebelliard]

I dont want to lose anything except for zooming/scrolling, given how feature rich it is. The above link from GMaps2 did not work. :(

[Tiago Duarte]

I see you are a though customer :) you can try a javascript approach to just disable mouse scroll such as document.body.style.overflow=allowScroll?"":"hidden"; (stackoverflow.com/questions/2554030/…)

[anusreemn]

Can anyone give an update on this? How do we indicate 'scrollwheel: false' to an iframe src??! Plzz help... :(

[Ronaldinho Learn Coding]

@user3513687 see my answer

[Katie Kilian]

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

[Josef Sábl]

This answer is not valid for embedded maps.

[Hernaldo Gonzalez]

with this you lose +- zoom feature

[MCSell]

so, how this is going to work on an iframe google map ?

[stephanfriedrich]

can you give an example ? scroll-wheel is this not only an javascript property ?

[stephanfriedrich]

!!! Also Note, Imho pointer-events disabled all click Event's for this Iframe.

[Gerry]

If using google maps version 3, I suggest you do this instead: stackoverflow.com/a/36193098/109561

[Emiliano Díaz]

It seems a solution for desktops devices but apparently doesn't support mobile first design.