Avoid zooming in/out when moving mouse wheel on a gmap

Question

I have a page that has a large map displayed in the center. As you might know (and hate) whenever you rotate your mouse wheel on a map, it zoomes in/out.

Is there a way to disable this effects?All the other interactions with the map are okay, i need only to disable that.

I'm using V3 of the API. Jquery solutions are welcome.

Possible duplicate of [How to disable mouse scroll-wheel scaling with Google Maps API](http://stackoverflow.com/questions/2330197/how-to-disable-mouse-scroll-wheel-scaling-with-google-maps-api) — Emiliano Díaz, Aug 02 '16 at 20:12

score 4 · Accepted Answer · edited May 23 '17 at 10:28

4

Have a look at these pages:

http://googlemapsapi.blogspot.com/2007/04/v278-go-ahead-scroll-your-mouse-wheels.html

http://code.davidjanes.com/blog/2008/11/14/how-to-enabledisable-mouse-wheel-actions-on-your-map/

The function you are looking for is

map.disableScrollWheelZoom()

€dit: V3 Solution is on Stackoverflow ;)

How to disable mouse scroll wheel scaling with Google Maps API

edited May 23 '17 at 10:28

Community

1
1

answered Jul 05 '11 at 12:31

Christian Smorra

1,756
11
13

This is for version 2 of the API – Nicola Peluchetti Jul 05 '11 at 12:40

score 0 · Answer 2 · answered Aug 01 '16 at 22:54

I created a more developed jQuery plugin that allows you to lock or unlock the map with a nice button. Because in some cases it's more usable for the user to navigate the map. This plugin disables the google map iframe with a transparent overlay div an adds a button for unlockit. You must press for 650 milliseconds to unlockit. You can change all the options for yout convenience. Check it at https://github.com/diazemiliano/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>

Avoid zooming in/out when moving mouse wheel on a gmap

2 Answers2