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?

I'm afraid currently there is only 1 thing you can do: send a [**feature-request**](https://code.google.com/p/gmaps-api-issues/issues/entry?template=Maps%20Embed%20API%20-%20Feature%20Request) — Dr.Molle, Jul 16 '14 at 01:48
you could also put a div over it position absolute with a higher z-index and a transparent background — Sjoerd de Wit, Nov 12 '14 at 15:36
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. — Matt Wagner, Jan 06 '15 at 16:05

score 54 · Accepted Answer · edited May 23 '17 at 12:26

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>

That solution does not work for IE<11, because `pointer-events` is not supported. — Katie Kilian, Jun 10 '15 at 17:01
**!!!** Also Note, Imho *pointer-events* **disabled all click Event's** for this Iframe. — stephanfriedrich, Aug 06 '15 at 13:58
If using google maps version 3, I suggest you do this instead: http://stackoverflow.com/a/36193098/109561 — Gerry, Mar 24 '16 at 04:11
It seems a solution for desktops devices but apparently doesn't support mobile first design. — Emiliano Díaz, Aug 03 '16 at 17:28

score 25 · Answer 2 · answered Apr 27 '15 at 12:36

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.

score 13 · Answer 3 · answered Jul 15 '14 at 22:06

13

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

answered Jul 15 '14 at 22:06

Tiago Duarte

3,244
3
23
29

5

But how do i indicate that to an iframe? – rebelliard Jul 15 '14 at 22:10
4

you should edit the map directly. if you cannot for some reason, you can use (http://stackoverflow.com/questions/21992498/is-it-possible-to-disable-mouse-scroll-wheel-zoom-on-embedded-google-maps) – Tiago Duarte Jul 15 '14 at 22:14
1

I dont want to lose anything except for zooming/scrolling, given how feature rich it is. The above link from GMaps2 did not work. :( – rebelliard Jul 15 '14 at 22:29
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"; (http://stackoverflow.com/questions/2554030/disable-browser-scrolling-with-the-middle-mouse-scroll-button) – Tiago Duarte Jul 15 '14 at 22:34
4

This answer is not valid for embedded maps. – Josef Sábl Jul 13 '15 at 13:17
so, how this is going to work on an iframe google map ? – MCSell Jul 22 '15 at 06:43

score 1 · Answer 4 · edited May 23 '17 at 11:54

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');
});

Emiliano Díaz · Answer 5 · 2016-08-01T22:50:24.367

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>

score -1 · Answer 6 · edited May 23 '17 at 12:10

-1

Taken from

How to disable mouse scroll wheel scaling with Google Maps API

You can just disable the scroll wheel functionality

options = $.extend({ scrollwheel: false, navigationControl: false, mapTypeControl: false, scaleControl: false, draggable: false, mapTypeId: google.maps.MapTypeId.ROADMAP }, options);

edited May 23 '17 at 12:10

Community

1
1

answered Jul 15 '14 at 22:06

Alek Hurst

4,527
5
19
24

3

But how do i indicate that to an iframe? – rebelliard Jul 15 '14 at 22:11
1

Can anyone give an update on this? How do we indicate 'scrollwheel: false' to an iframe src??! Plzz help... :( – anusreemn Oct 07 '14 at 06:41

score -1 · Answer 7 · answered Jan 20 '15 at 22:58

I had many maps within my website so I modified @Ronaldinho Learn Coding answer to a more general one.

$( document ).ready(function() {
   $('.scroll-safe-map').addClass('scrolloff'); 
   $('.map-control-scroll').on('click', function() {
       $('.scroll-safe-map').removeClass('scrolloff');
   });
   $('.map-control-scroll').mouseleave(function() {
       $('.scroll-safe-map').addClass('scrolloff'); 
   });    
});

score -2 · Answer 8 · answered Oct 20 '14 at 15:41

-2

You can disable it with css.

iframe {
pointer-events: none;
}

answered Oct 20 '14 at 15:41

Nabeel

841
1
10
23

1

with this you lose +- zoom feature – Hernaldo Gonzalez Jul 14 '15 at 19:10

score -3 · Answer 9 · edited Dec 16 '16 at 13:15

-3

you can set scroll-wheel: False; in the css property of the tag or tag to disable scrolling from Google maps when zoomed-in & zoomed-out.

edited Dec 16 '16 at 13:15

deceze

510,633
85
743
889

answered Jun 27 '15 at 11:47

dhruv

1

can you give an example ? scroll-wheel is this not only an javascript property ? – stephanfriedrich Aug 06 '15 at 13:54

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

9 Answers9

Linked