43

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?

3
  • I'm afraid currently there is only 1 thing you can do: send a feature-request
    – Dr.Molle
    Jul 16, 2014 at 1:48
  • 2
    you could also put a div over it position absolute with a higher z-index and a transparent background Nov 12, 2014 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. Jan 6, 2015 at 16:05

9 Answers 9

54

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>
4
  • 1
    That solution does not work for IE<11, because pointer-events is not supported. Jun 10, 2015 at 17:01
  • 5
    !!! Also Note, Imho pointer-events disabled all click Event's for this Iframe. Aug 6, 2015 at 13:58
  • If using google maps version 3, I suggest you do this instead: stackoverflow.com/a/36193098/109561
    – Gerry
    Mar 24, 2016 at 4:11
  • 1
    It seems a solution for desktops devices but apparently doesn't support mobile first design. Aug 3, 2016 at 17:28
25

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.

0
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

6
  • 5
    But how do i indicate that to an iframe?
    – rebelliard
    Jul 15, 2014 at 22:10
  • 4
    you should edit the map directly. if you cannot for some reason, you can use <iframe style="pointer-events:none"> (stackoverflow.com/questions/21992498/…) Jul 15, 2014 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, 2014 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"; (stackoverflow.com/questions/2554030/…) Jul 15, 2014 at 22:34
  • 4
    This answer is not valid for embedded maps. Jul 13, 2015 at 13:17
1

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

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>

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

2
  • 3
    But how do i indicate that to an iframe?
    – rebelliard
    Jul 15, 2014 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 7, 2014 at 6:41
-1

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

You can disable it with css.

iframe {
pointer-events: none;
}
1
-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.

1
  • can you give an example ? scroll-wheel is this not only an javascript property ? Aug 6, 2015 at 13:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.