How to disable mouse scroll wheel scaling with Google Maps API

Question

I am using Google Maps API  v3  to draw a few maps on a page  One thing I d like to do is disable zooming when you scroll the mouse wheel over the map  but I m unsure how   I have disabled the scaleControl  i e  removed the scaling UI element   but this doesn t prevent scroll wheel scaling   Here is part of my function  it s a simple jQuery plugin      fn showMap   function options  addr     options     extend       navigationControl  false      mapTypeControl  false      scaleControl  false      draggable  false      mapTypeId  google maps MapTypeId ROADMAP      options     var map   new google maps Map document getElementById   this  attr  id     options         Code cut from this example as not relevant

User · Answer

As of now  October 2017  Google has implemented a specific property to handle the zooming scrolling  called gestureHandling  Its purpose is to handle mobile devices operation  but it modifies the behaviour for desktop browsers as well  Here it is from official documentation    function initMap       var locationRio    lat  -22 915  lng  -43 197     var map   new google maps Map document getElementById  map          zoom  13      center  locationRio      gestureHandling   none            The available values for gestureHandling are           greedy   The map always pans  up or down  left or right  when the user swipes  drags on  the screen  In other words  both a one-finger swipe and a two-finger swipe cause the map to pan     cooperative   The user must swipe with one finger to scroll the page and two fingers to pan the map  If the user swipes the map with one finger  an overlay appears on the map  with a prompt telling the user to use two fingers to move the map  On desktop applications  users can zoom or pan the map by scrolling while pressing a modifier key  the ctrl or   key      none   This option disables panning and pinching on the map for mobile devices  and dragging of the map on desktop devices     auto   default   Depending on whether the page is scrollable  the Google Maps JavaScript API sets the gestureHandling property to either  cooperative  or  greedy       In short  you can easily force the setting to  always zoomable    greedy      never zoomable    none    or  user must press CRTL   to enable zoom    cooperative

User · Answer

You just need to add in map options   scrollwheel  false

User · Answer

For someone that wondering how to disable the Javascript Google Map API  It will enable the zooming scroll if you click the map once  And disable after your mouse exit the div   Here is some example  x000D   x000D  var map  x000D  var element   document getElementById  map-canvas    x000D  function initMaps     x000D    map   new google maps Map element     x000D      zoom  17  x000D      scrollwheel  false  x000D      center    x000D        lat  parseFloat -33 915916   x000D        lng  parseFloat 151 147159  x000D         x000D        x000D    x000D   x000D   x000D    START IMPORTANT part x000D    disable scrolling on a map  smoother UX  x000D  jQuery   map-container   on  mouseleave   function    x000D    map setOptions   scrollwheel  false     x000D      x000D  jQuery   map-container   on  mousedown   function     x000D    map setOptions   scrollwheel  true     x000D      x000D    END IMPORTANT part x000D   big-placeholder   x000D    background-color   1da261  x000D    height  300px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt html gt  x000D     lt body gt  x000D         lt div class  big-placeholder  gt  x000D         lt  div gt  x000D         x000D         x000D         lt  -- START IMPORTANT part -- gt  x000D         lt div class  map-container  gt  x000D           lt div id  map-canvas  style  min-height  400px   gt  lt  div gt    x000D         lt  div gt  x000D         lt  -- END IMPORTANT part-- gt  x000D         x000D         x000D         x000D         lt div class  big-placeholder  gt  x000D         lt  div gt  x000D         lt script async defer src  https   maps googleapis com maps api js key AIzaSyAIjN23OujC NdFfvX4 AuoGBbkx7aHMf0 amp callback initMaps  gt  x000D         lt  script gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

A simple solution    x000D   x000D     DISABLE MOUSE SCROLL IN MAPS x000D     enable the pointer events only on click  x000D      gmap-wrapper   on  click   function      x000D        gmap-wrapper iframe   removeClass  scrolloff       set the pointer events true on click x000D      x000D     you want to disable pointer events when the mouse leave the canvas area  x000D      gmap-wrapper   mouseleave function      x000D        gmap-wrapper iframe   addClass  scrolloff       set the pointer events to none when mouse leaves the map area x000D      x000D   scrolloff  pointer-events  none    x000D   lt html gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div class  gmap-wrapper  gt  x000D   lt iframe class  scrolloff  src  https   www google com maps embed pb  1m18 1m12 1m3 1d44754 55736493158 2d9 151166379101554 3d45 486726 2m3 1f0 2f0 3f0 3m2 1i1024 2i768 4f13 1 3m3 1m2 1s0x4786bfca7e8fb1cb 3A0xee8d99c9d153be98 2sCorsidia 5e0 3m2 1sit 2sit 4v1496947992608  width  600  height  450  frameborder  0  style  border 0  allowfullscreen gt  lt  iframe gt  x000D   lt  div gt  x000D   lt  html gt  x000D   x000D   x000D    Source  https   github com Corsidia scrolloff

User · Answer

I created a more developed jQuery plugin that allows you to lock or unlock the map with a nice button   This plugin disables the Google Maps iframe with a transparent overlay div and adds a button for unlockit  You must press for 650 milliseconds to unlock it   You can change all the options for your convenience  Check it at https   github com diazemiliano googlemaps-scrollprevent  Here s some example    x000D   x000D   function     x000D      function     x000D          btn-start   click function     x000D           iframe src   google com maps     scrollprevent   x000D          printLog  true x000D           start    x000D        return     btn-stop   click function     x000D          return    iframe src   google com maps     scrollprevent   stop    x000D            x000D          x000D      return     btn-start   trigger  click    x000D        x000D     call this   x000D   embed-container   x000D    position  relative  important  x000D    padding-bottom  56 25   important  x000D    height  0  important  x000D    overflow  hidden  important  x000D    max-width  100   important  x000D    x000D   embed-container iframe   x000D    position  absolute  important  x000D    top  0  important  x000D    left  0  important  x000D    width  100   important  x000D    height  100   important  x000D    x000D   mapscroll-wrap   x000D    position  static  important  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdn rawgit com diazemiliano googlemaps-scrollprevent v 0 6 5 dist googlemaps-scrollprevent min js  gt  lt  script gt  x000D   lt div class  embed-container  gt  x000D     lt 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  x000D    width  400  height  300  frameborder  0  style  border 0  gt  lt  iframe gt  x000D   lt  div gt  x000D   lt p gt  lt a id  btn-start  href     gt  Start Scroll Prevent  lt  a gt    lt a id  btn-stop  href     gt  Stop Scroll Prevent  lt  a gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Daniel s code does the job  thanks a heap    But I wanted to disable zooming completely  I found I had to use all four of these options to do so       zoom  14                            Set the zoom level manually   zoomControl  false    scaleControl  false    scrollwheel  false    disableDoubleClickZoom  true            See  MapOptions object specification

User · Answer

Just incase anybody is interested in a pure css solution for this  The following code overlays a transparent div over the map  and moves the transparent div behind the map when it is clicked  The overlay prevents zooming  once clicked  and behind the map  zooming is enabled    See my blog post Google maps toggle zoom with css for an explanation how it works  and pen codepen io daveybrown pen yVryMr for a working demo   Disclaimer  this is mainly for learning and probably won t be the best solution for production websites   HTML     lt div class  map-wrap small-11 medium-8 small-centered columns  gt       lt input id  map-input  type  checkbox    gt       lt label class  map-overlay  for  map-input  class  label  onclick    gt  lt  label gt       lt iframe src  https   www google com maps embed pb  1m14 1m12 1m3 1d19867 208601651986 2d-0 17101002911118332 3d51 50585742500925 2m3 1f0 2f0 3f0 3m2 1i1024 2i768 4f13 1 5e0 3m2 1sen 2suk 4v1482355389969  gt  lt  iframe gt   lt  div gt    CSS    map-wrap       position  relative      overflow  hidden      height  180px      margin-bottom  10px      map-input       opacity  0      map-overlay       display  block      content          position  absolute      top  0      left  0      width  100   important      height  100   important      overflow  hidden      z-index  2          map-input type checkbox  checked   iframe       z-index  3      map-input type checkbox  checked    map-overlay       position  fixed      top  0      left  0      width  100   important      height  100   important      iframe       position  absolute      top  0      left  0      width  100   important      height  100   important      z-index  1      border  none

User · Answer

I do it with this simple examps  jQuery      map   click function          this  find  iframe   addClass  clicked          mouseleave function          this  find  iframe   removeClass  clicked         CSS   map       width  100       map iframe       width  100       display  block      pointer-events  none      position  relative     IE needs a position other than static       map iframe clicked       pointer-events  auto      Or use the gmap options  function init          var mapOptions               scrollwheel  false

User · Answer

Keep it simple  Original Google maps variable  none of the extra stuff    var mapOptions          zoom  16       center  myLatlng       scrollwheel  false

User · Answer

Just in case you want to do this dynamically   function enableScrollwheel map        if map  map setOptions   scrollwheel  true        function disableScrollwheel map        if map  map setOptions   scrollwheel  false         Sometimes you have to show something  complex  over the map  or the map is a small part of the layout   and this scroll zooming gets in the middle  but once you have a clean map  this way of zooming is nice

User · Answer

Use that piece of code  that will give you all the color and zooming control of google map   scaleControl  false and scrollwheel  false will prevent the mousewheel from zoom up or down    x000D   x000D  function initMap     x000D                 Styles a map in night mode  x000D              var map   new google maps Map document getElementById  map      x000D                  center   lat  23 684994  lng  90 356331   x000D                  zoom  8  x000D                  scaleControl  false  x000D                  scrollwheel  false  x000D                styles    x000D                   elementType   geometry   stylers    color   F1F2EC      x000D                   elementType   labels text stroke   stylers    color   877F74      x000D                   elementType   labels text fill   stylers    color   877F74      x000D                    x000D                    featureType   administrative locality   x000D                    elementType   labels text fill   x000D                    stylers    color    d59563    x000D                     x000D                    x000D                    featureType   poi   x000D                    elementType   labels text fill   x000D                    stylers    color    d59563    x000D                     x000D                    x000D                    featureType   poi park   x000D                    elementType   geometry   x000D                    stylers    color    263c3f    x000D                     x000D                    x000D                    featureType   poi park   x000D                    elementType   labels text fill   x000D                    stylers    color    f77c2b    x000D                     x000D                    x000D                    featureType   road   x000D                    elementType   geometry   x000D                    stylers    color   F5DAA6    x000D                     x000D                    x000D                    featureType   road   x000D                    elementType   geometry stroke   x000D                    stylers    color    212a37    x000D                     x000D                    x000D                    featureType   road   x000D                    elementType   labels text fill   x000D                    stylers    color    f77c2b    x000D                     x000D                    x000D                    featureType   road highway   x000D                    elementType   geometry   x000D                    stylers    color    746855    x000D                     x000D                    x000D                    featureType   road highway   x000D                    elementType   geometry stroke   x000D                    stylers    color   F5DAA6    x000D                     x000D                    x000D                    featureType   road highway   x000D                    elementType   labels text fill   x000D                    stylers    color   F5DAA6    x000D                     x000D                    x000D                    featureType   transit   x000D                    elementType   geometry   x000D                    stylers    color    2f3948    x000D                     x000D                    x000D                    featureType   transit station   x000D                    elementType   labels text fill   x000D                    stylers    color    f77c2b3    x000D                     x000D                    x000D                    featureType   water   x000D                    elementType   geometry   x000D                    stylers    color    0676b6    x000D                     x000D                    x000D                    featureType   water   x000D                    elementType   labels text fill   x000D                    stylers    color    515c6d    x000D                     x000D                    x000D                    featureType   water   x000D                    elementType   labels text stroke   x000D                    stylers    color    17263c    x000D                    x000D                  x000D                  x000D       x000D               var marker   new google maps Marker   x000D                position   lat  23 684994  lng  90 356331   x000D                map  map  x000D                title   BANGLADESH  x000D                  x000D              x000D   x000D   x000D

User · Answer

In my case the crucial thing was to set in  scrollwheel  false in init  Notice  I am using jQuery UI Map  Below is my CoffeeScript init function heading        map canvas   gmap   scrollwheel  false   bind  init    evt  map  - gt

User · Answer

In version 3 of the Maps API you can simply set the scrollwheel option to false within the MapOptions properties   options     extend       scrollwheel  false      navigationControl  false      mapTypeControl  false      scaleControl  false      draggable  false      mapTypeId  google maps MapTypeId ROADMAP    options     If you were using version 2 of the Maps API you would have had to use the disableScrollWheelZoom   API call as follows   map disableScrollWheelZoom      The scrollwheel zooming is enabled by default in version 3 of the Maps API  but in version 2 it is disabled unless explicitly enabled with the enableScrollWheelZoom   API call

User · Answer

Just in case  you are using the GMaps js library  which makes it a bit simpler to do things like Geocoding and custom pins  here s how you solve this issue using the techniques learned from the previous answers   var Gmap   new GMaps     div    main-map      FYI  this setting property used to be  el   It didn t need the     in older versions   lat  51 044308    lng  -114 0630914    zoom  15         To access the Native Google Maps object use the  map property if Gmap map         Disabling mouse wheel scroll zooming   Gmap map setOptions   scrollwheel  false

[jquery] How to disable mouse scroll wheel scaling with Google Maps API

Examples related to jquery

Examples related to google-maps

Examples related to google-maps-api-3

Examples related to jquery-plugins