Disable mouse scroll wheel zoom on embedded Google Maps

Question

I am working on a WordPress site where the authors usually embed Google Maps using iFrames in most posts   Is there a way to disable the zoom via mouse scroll wheel on all of them using Javascript

User · Answer

This is my approach  I find it easy to implement on various websites and use it all the time  CSS and JavaScript    lt style type  text css  gt   scrolloff iframe         pointer-events  none      lt  style gt    lt script type  text javascript  gt  function scrollOn             map   removeClass  scrolloff       set the pointer events true on click     function scrollOff             map   addClass  scrolloff         lt  script gt    In the HTML  you will want to wrap the iframe in a div   lt div id  map  class  scrolloff  onclick  scrollOn    onmouseleave  scrollOff     gt    x000D   x000D  function scrollOn     x000D          map   removeClass  scrolloff       set the pointer events true on click x000D      x000D    x000D   x000D  function scrollOff     x000D          map   addClass  scrolloff       set the pointer events true on click x000D       x000D    x000D   scrolloff iframe     x000D          pointer-events  none   x000D        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  map  class  scrolloff  onclick  scrollOn    onmouseleave  scrollOff     gt  lt iframe src  https   www google com maps embed pb  1m18 1m12 1m3 1d23845 03946309692 2d-70 0451736316453 3d41 66373705082399 2m3 1f0 2f0 3f0 3m2 1i1024 2i768 4f13 1 3m3 1m2 1s0x89fb159980380d21 3A0x78c040f807017e30 2sChatham Tides 5e0 3m2 1sen 2sus 4v1452964723177  width  100   height  450  frameborder  0  style  border 0  allowfullscreen gt  lt  iframe gt  lt  div gt  x000D   x000D   x000D    Hope this helps anyone looking for a simple solution

User · Answer

In Google Maps v3 you can now disable scroll to zoom  which leads to a much better user experience  Other map functions will still work and you don t need extra divs  I also thought there should be some feedback for the user so they can see when scrolling is enabled  so I added a map border      map is the google maps object    map  is the jquery selector preventAccidentalZoom map    map         Disables and enables scroll to zoom as appropriate  Also    gives the user a UI cue as to when scrolling is enabled  function preventAccidentalZoom map  mapSelector     var mapElement     mapSelector         Disable the scroll wheel by default   map setOptions   scrollwheel  false          Enable scroll to zoom when there is a mouse down on the map       This allows for a click and drag to also enable the map   mapElement on  mousedown   function          map setOptions   scrollwheel  true         mapElement css  border    1px solid blue               Disable scroll to zoom when the mouse leaves the map    mapElement mouseleave function          map setOptions   scrollwheel  false        mapElement css  border    none

User · Answer

After doing some research you have 2 options  Since new maps api with iframe embed does not seem to support disabling of mousewheel   First would be using old google maps   https   support google com maps answer 3045828 hl en     Second would be creating a javascript function to simplify embeding of a map for each comment and using parameters  it s sample code only to point location not show exact solution   function createMap containerid  parameters      var mymap   document getElementById containerid     map options         zoom  13      scrollwheel  false         rest of options           map   new google maps Map mymap  map options          rest of code  to take parameters into account

User · Answer

I extended  nathanielperales solution   Below the behavior description    click the map to enable scroll when mouse leaves the map  disable scroll   Below the javascript code      Disable scroll zooming and bind back the click event var onMapMouseleaveHandler   function  event      var that     this      that on  click   onMapClickHandler     that off  mouseleave   onMapMouseleaveHandler     that find  iframe   css  pointer-events    none       var onMapClickHandler   function  event      var that     this         Disable the click handler until the user leaves the map area   that off  click   onMapClickHandler         Enable scrolling zoom   that find  iframe   css  pointer-events    auto          Handle the mouse leave event   that on  mouseleave   onMapMouseleaveHandler         Enable map zooming with mouse scroll when the user clicks the map     maps embed-container   on  click   onMapClickHandler     And here is an jsFiddle example

User · Answer

Here s my take on the  nathanielperales answer extended by  chams  now extended again by me   HTML   lt div class  embed-container maps  gt       lt iframe width  600  height  450  frameborder  0  src  http   foo com  gt  lt  iframe gt   lt  div gt     jQuery     we re doing so much with jQuery already  might as well set the initial state     maps iframe   css  pointer-events    none        as a safety  allow pointer events on click     maps   click function         this  find  iframe   css  pointer-events    auto              maps   mouseleave function          set the default again on mouse out - disallow pointer events     this  find  iframe   css  pointer-events    none         unset the comparison data so it doesn t effect things when you enter again     this  removeData  oldmousepos             maps   bind  mousemove   function e      this     this        check the current mouse X position    this data  mousepos   e pageX        set the comparison data if it s null or undefined   if   this data  oldmousepos      null         this data  oldmousepos    this data  mousepos           setTimeout function           some left right movement - allow pointer events     if   this data  oldmousepos       this data  mousepos             this find  iframe   css  pointer-events    auto                 set the compairison variable      this data  oldmousepos    this data  mousepos          300     console log  this data  oldmousepos           this data  mousepos

User · Answer

I was having the same problem  when scrolling the page then the pointer becomes over the map  it starts to zoom in out the map instead of continuing scrolling the page      So I solved this putting a div with an  overlay exactly before each gmap iframe insertion  see    lt html gt     lt div class  overlay  onClick  style pointerEvents  none   gt  lt  div gt     lt iframe src  https   mapsengine google com map embed mid some map id  width  640  height  480  gt  lt  iframe gt   lt  html gt    In my CSS i created the class    overlay      background transparent      position relative      width 640px     height 480px     your iframe height       top 480px      your iframe height       margin-top -480px      your iframe height        The div will cover the map  preventing pointer events from getting to it  But if you click on the div  it becomes transparent to pointer events  activating the map again   I hope get helped you

User · Answer

Here is my solution for the problem  I was building a WP site  so there is a little php code here  But the key is scrollwheel  false  in the map object    function initMap             var uluru    lat   lt  php echo  latitude    gt   lng   lt  php echo  Longitude    gt            var map   new google maps Map document getElementById  map                  zoom  18              scrollwheel  false              center  uluru                     var marker   new google maps Marker               position  uluru              map  map                     Hope this will help  Cheers

User · Answer

This will give you a responsive Google Map that will stop the scrolling on the iframe  but once clicked on will let you zoom   Copy and paste this into your html but replace the iframe link with your own  He s an article on it with an example  Disable the mouse scroll wheel zoom on embedded Google Map iframes   lt style gt       overlay       background transparent      position relative      width 100      your iframe width        height 480px     your iframe height        top 480px     your iframe height        margin-top -480px     your iframe height           lt  style gt   lt div class  overlay  onClick  style pointerEvents  none   gt  lt  div gt   lt iframe src  https   mapsengine google com map embed mid some map id  width  100   height  480  gt  lt  iframe gt

User · Answer

I just register one account on developers google com and get a token for call a Maps API  and just disable that like this  scrollwheel  false        var map      function initMap             map   new google maps Map document getElementById  container google maps                  center   lat  -34 397  lng  150 644               zoom  8              scrollwheel  false

User · Answer

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   lt div class  embed-container maps  gt       lt iframe width  600  height  450  frameborder  0  src  http   foo com  gt    lt  iframe gt   lt  div gt    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

User · Answer

Variations on a theme  a simple solution with jQuery  no CSS editing needed      make iframe active on click  disable on mouseleave    iframe google map   each  function i  iframe          iframe  parent   hover     make inactive on hover         function       iframe  css  pointer-events    none           click     activate on click         function       iframe  css  pointer-events    auto           trigger  mouseover       make it inactive by default as well       Hover listener is attached to the parent element  so if the current parent is bigger  you can just simply wrap the iframe with a div before the 3rd line   Hope it ll be useful for somebody

User · Answer

Well  for me the best solution was to simply use like this   HTML    lt div id  google-maps  gt   lt iframe frameborder  0  height  450  src     embed-map      width  100  lt  iframe gt   lt  div gt    CSS    google-maps iframe   pointer-events none      JS    lt script gt      function             google-maps   click function e              this  find  iframe   css  pointer-events    auto           mouseleave function e              this  find  iframe   css  pointer-events    none                  lt  script gt    RESULT  Considerations   The best would be to add an overlay with a darker transparency with a text   Click to browse  when mouse wheel is deactivated But when it is activated  after you click on it  then the transparency with text would disappear and the user could browse the map as expected  Any clues how to do that

User · Answer

The simplest one    lt div id  myIframe  style  width 640px  height 480px   gt      lt div style  background transparent  position absolute  z-index 1  width 100   height 100   cursor pointer   onClick  style pointerEvents  none   gt  lt  div gt      lt iframe src  https   www google com maps d embed mid XXXXXXXXXXXXXX  style  width 640px  height 480px   gt  lt  iframe gt   lt  div gt

User · Answer

To disable mouse scroll wheel zoom on embedded Google Maps  you just need to set the css property pointer-events of the iframe to none    lt style gt   googlemap iframe       pointer-events none     lt  style gt    Thats All   Pretty neat huh    lt div id  googlemap  gt       lt iframe src  https   www google com maps embed pb  1m18 1m12 1m3 1d3648 6714814904954 2d90 40069809681577 3d23 865796688563787 2m3 1f0 2f0 3f0 3m2 1i1024 2i768 4f13 1 3m3 1m2 1s0x3755c425897f1f09 3A0x2bdfa71343f07395 2sArcadia Green Point 2C Rd No  16 2C Dhaka 1230 2C Bangladesh 5e0 3m2 1sen 2sin 4v1442184916780  width  400  height  300  frameborder  0  style  border 0  allowfullscreen gt  lt  iframe gt   lt  div gt

User · Answer

Here is a simple solution  Just set the pointer-events  none CSS to the  lt iframe gt  to disable mouse scroll    lt div id  gmap-holder  gt       lt iframe width  100   height  400  frameborder  0  style  border 0  pointer-events none              src  https   www google com maps embed v1 place q XXX amp key YYY  gt  lt  iframe gt   lt  div gt    If you want the mouse scroll to be activated when the user clicks into the map  then use the following JS code  It will also disable the mouse scroll again  when the mouse moves out of the map     function             gmap-holder   click function e              this  find  iframe   css  pointer-events    all           mouseleave function e              this  find  iframe   css  pointer-events    none

User · Answer

The simplest way to do it is by using a pseudo-element like  before or  after   This method will not require any additional html elements or jquery  If we have for instance this html structure    lt div class  map wraper  gt        lt iframe src  https   www google com maps embed pb  1m18 1m12 1m3 1d405689 7826944034 2d-122 04109805 3d37 40280355 2m3 1f0 2f0 3f0 3m2 1i1024 2i768 4f13 1 3m3 1m2 1s0x808fb68ad0cfc739 3A0x7eb356b66bd4b50e 2sSilicon Valley 2C CA 5e0 3m2 1sen 2sro 4v1438864791455  width  600  height  450  frameborder  0  style  border 0  allowfullscreen gt  lt  iframe gt    lt  div gt    Then all we need to do is make the wrapper relative to the pseudo-element we will create to prevent the scrolling    map wraper      position relative      After this we will create the pseudo-element that will be positioned over the map therefor preventing the scrolling    map wraper after      background  none      content           display  inline-block      font-size  0      height  100       left  0      opacity  0      position  absolute      top  0      width  100       z-index  9      And you re done  no jquery no extra html elements  Here is a working jsfiddle example  http   jsfiddle net e6j4Lbe1

User · Answer

Yes its quite easy  I faced a similar problem  Just add the css property  pointer-events  to the iframe div and set it to  none    Example  lt      iframe style  pointer-events none  src              SideNote  This fix would disable all other mouse events on the map  It worked for me since we didnt require any user interaction on the map

User · Answer

I ve created a very simple jQuery plugin to resolve the problem  Check it at https   diazemiliano github io googlemaps-scrollprevent   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  Edit in JSFiddle Result JavaScript HTML CSS  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

Add this to your script   function initMap         var uluru    lat  -25 363  lng  131 044       var map   new google maps Map document getElementById  map              zoom  12          center  uluru          scrollwheel  false          disableDefaultUI  true          disableDoubleClickZoom  true             var marker   new google maps Marker           position  uluru          map  map

User · Answer

var mapOptions        scrollwheel  false     center  latlng     mapTypeId  google maps MapTypeId ROADMAP

User · Answer

Here would be my approach to this   Pop this into my main js or similar file      Create an array of styles  var styles                                           stylers                              saturation  -300                                                                  featureType   road                       elementType   geometry                       stylers                              hue    16a085                               visibility   simplified                                                                  featureType   road                       elementType   labels                       stylers                              visibility   off                                                                                 Lagitute and longitude for your location goes here                lat   -7 79722                 lng   110 36880                    Create a new StyledMapType object  passing it the array of styles                   as well as the name to be displayed on the map type control                customMap   new google maps StyledMapType styles                     name   Styled Map                     Create a map object  and include the MapTypeId to add                to the map type control                mapOptions                       zoom  12                  scrollwheel  false                    center  new google maps LatLng  lat  lng                      mapTypeControlOptions                          mapTypeIds   google maps MapTypeId ROADMAP                                                       map   new google maps Map document getElementById  map    mapOptions                 myLatlng   new google maps LatLng  lat  lng                   marker   new google maps Marker                   position  myLatlng                  map  map                  icon   images marker png                                     Associate the styled map with the MapTypeId and set it to display                map mapTypes set  map style   customMap                 map setMapTypeId  map style      Then simply insert an empty div where you want the map to appear on your page    lt div id  map  gt  lt  div gt   You will obviously need to call in the Google Maps API as well  I simply created a file called mapi js and threw it in my  js folder  This file needs to be called before the above javascript    window google   window google        google maps   google maps         function        function getScript src        document write   lt      script src      src                              type  text javascript  gt  lt       script gt            var modules   google maps modules         google maps   gjsload     function name  text        modules name    text          google maps Load   function apiLoad        delete google maps Load      apiLoad  0 009999999776482582     http   mt0 googleapis com vt lyrs m 228000000 u0026src api u0026hl en-US u0026   http   mt1 googleapis com vt lyrs m 228000000 u0026src api u0026hl en-US u0026   null null null null  m 228000000      http   khm0 googleapis com kh v 135 u0026hl en-US u0026   http   khm1 googleapis com kh v 135 u0026hl en-US u0026   null null null 1  135      http   mt0 googleapis com vt lyrs h 228000000 u0026src api u0026hl en-US u0026   http   mt1 googleapis com vt lyrs h 228000000 u0026src api u0026hl en-US u0026   null null null null  h 228000000      http   mt0 googleapis com vt lyrs t 131 r 228000000 u0026src api u0026hl en-US u0026   http   mt1 googleapis com vt lyrs t 131 r 228000000 u0026src api u0026hl en-US u0026   null null null null  t 131 r 228000000   null null    http   cbk0 googleapis com cbk    http   cbk1 googleapis com cbk        http   khm0 googleapis com kh v 80 u0026hl en-US u0026   http   khm1 googleapis com kh v 80 u0026hl en-US u0026   null null null null  80      http   mt0 googleapis com mapslt hl en-US u0026   http   mt1 googleapis com mapslt hl en-US u0026       http   mt0 googleapis com mapslt ft hl en-US u0026   http   mt1 googleapis com mapslt ft hl en-US u0026       http   mt0 googleapis com vt hl en-US u0026   http   mt1 googleapis com vt hl en-US u0026       http   mt0 googleapis com mapslt loom hl en-US u0026   http   mt1 googleapis com mapslt loom hl en-US u0026       https   mts0 googleapis com mapslt hl en-US u0026   https   mts1 googleapis com mapslt hl en-US u0026       https   mts0 googleapis com mapslt ft hl en-US u0026   https   mts1 googleapis com mapslt ft hl en-US u0026       en-US   US  null 0 null null  http   maps gstatic com mapfiles    http   csi gstatic com   https   maps googleapis com   http   maps googleapis com     http   maps gstatic com intl en us mapfiles api-3 14 0   3 14 0    2635921922  1 null null null null 0    null null 0  http   khm googleapis com mz v 135 u0026  null  https   earthbuilder googleapis com   https   earthbuilder googleapis com  null  http   mt googleapis com vt icon     http   mt0 googleapis com vt   http   mt1 googleapis com vt     https   mts0 googleapis com vt   https   mts1 googleapis com vt    null   0  m  228000000    null  en-US   US  null 18 null null null null null null   47   37    smartmaps       0   null   0  m  228000000    null  en-US   US  null 18 null null null null null null   47   37    smartmaps       3   null   0  h  228000000    null  en-US   US  null 18 null null null null null null   50   37    smartmaps       0   null   0  h  228000000    null  en-US   US  null 18 null null null null null null   50   37    smartmaps       3   null   4  t  131   0  r  131000000    null  en-US   US  null 18 null null null null null null   5   37    smartmaps       0   null   4  t  131   0  r  131000000    null  en-US   US  null 18 null null null null null null   5   37    smartmaps       3   null null  null  en-US   US  null 18  0   null null  null  en-US   US  null 18  3   null null  null  en-US   US  null 18  6   null null  null  en-US   US  null 18  0     loadScriptTime          var loadScriptTime    new Date  getTime      getScript  http   maps gstatic com intl en us mapfiles api-3 14 0 main js             When you call the mapi js file be sure you pass it the sensor false attribute   ie   lt script type  text javascript  src  js mapi js sensor false  gt  lt  script gt   The new version 3 of the API requires the inclusion of sensor for some reason  Make sure you include the mapi js file before your main js file

User · Answer

There is an awesome and easy solution   You need to add a custom class in your css that sets the pointer events to map canvas to none    scrolloff     pointer-events  none      Then  with jQuery  you can add and remove that class based on different events  for example              document   ready function             you want to enable the pointer events only on click               map canvas   addClass  scrolloff       set the pointer events to none on doc ready             canvas   on  click   function                     map canvas   removeClass  scrolloff       set the pointer events true on click                     you want to disable pointer events when the mouse leave the canvas area             map canvas    mouseleave function                   map canvas   addClass  scrolloff       set the pointer events to none when mouse leaves the map area                    I have created an example in jsfiddle  hope that helps

User · Answer

I stumbled upon this issue myself and used some of a mashup of two very useful answers on this question   czerasz s answer and massa s answer   They both have a lot of truth  but somewhere in my tests  I found out that one didn t work for mobile and had poor IE support  only works on IE11   This is the solution by nathanielperales  then extended by czerasz  which relies on pointer-events css and that doesn t work on mobile  there is no pointer in mobile  and it doesn t work on any version of IE that is not v11  Normally I wouldn t care less  but there are a ton of users out there and we want consistent functionality  so I went with the overlay solution  using a wrapper to make it easier to code    So  my markup looks like this    lt div class  map embed-container  gt     lt div id  map-notice  style  display  block   gt   Tell your users what to do    lt  div gt     lt div class  map-overlay  style  display  block   gt  lt  div gt     lt iframe style  width 100   src  https   www google com maps embed pb  1m14 1m8 1m3 1d3785 684302567802 2d-66 15578327375803 3d18 40721382009222 3m2 1i1024 2i768 4f13 1 3m3 1m2 1s0x8c036a35d02b013f 3A0x5962cad95b9ec7f8 2sPlaza Del Sol 5e0 3m2 1sen 2spr 4v1415284687548  width  633  height  461  frameborder  0  gt  lt  iframe gt   lt  div gt    Then the styles are like this    map embed-container     position relative      map embed-container  map-notice    position absolute    right 0    top 0    background-color rgb 100 100 100    for old IE browsers with no support for rgba       background-color  rgba 0 0 0  50     color   ccc    padding  8px     map embed-container  map-overlay    height 100     width 100     position absolute    z-index 9999    background-color rgba 0 0 0 0 10    should be transparent but this will help you see where the overlay is going in relation with the markup       Lastly the script     using jquery    var onMapMouseleaveHandler   function  event          map-notice   fadeIn 500     var elemento      this     elemento on  click   onMapClickHandler     elemento off  mouseleave   onMapMouseleaveHandler         map-overlay   fadeIn 500      var onMapClickHandler   function  event          map-notice   fadeOut 500     var elemento      this     elemento off  click   onMapClickHandler         map-overlay   fadeOut 500     elemento on  mouseleave   onMapMouseleaveHandler         map embed-container   on  click   onMapClickHandler     I also added my tested solution in a GitHub gist  if you like to get stuff from there

User · Answer

Add style pointer-events none  this working fine   lt iframe style  pointer-events none   src    gt  lt  iframe gt

User · Answer

For google maps v2  - GMap2   ar map   new GMap2 document getElementById  google map     map disableScrollWheelZoom

User · Answer

This is a solution with CSS and Javascript  ie  Jquery but works also with pure Javascript    At the same time the map is responsive  Avoid map to zoom when scrolling  but map can be activated by click in it   HTML JQuery Javascript   lt div id  map  onclick      googlemap   css  pointerEvents   auto    return true   gt        lt iframe id  googlemap  src  http   your-embed-url  height  350  gt  lt  iframe gt   lt  div gt    CSS   map       position  relative       padding-bottom  36      16 9 ratio for responsive         height  0       overflow  hidden       background transparent     does the trick        z-index 98     does the trick       map iframe        pointer-events none     does the trick        position  absolute       top  0       left  0       width  100   important       height  100   important       z-index 97     does the trick         Have fun

User · Answer

I tried the first answer in this discussion and it wasn t working for me no matter what I did so I came up with my own solution   Wrap the iframe with a class   maps in this example  and ideally embedresponsively code  http   embedresponsively com      Change the CSS of the iframe to pointer-events  none and then using jQuery s click function to the parent element you can change the iframes css to pointer-events auto  HTML   lt div class  embed-container maps  gt       lt iframe width  600  height  450  frameborder  0  src  http   foo com  gt  lt  iframe gt   lt  div gt    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           I m sure there s a JavaScript only way of doing this  if someone wants to add to this feel free   The JavaScript way to reactivate the pointer-events is pretty simple  Just give an Id to the iFrame  i e   iframe    then apply an onclick event to the cointainer div    onclick  document getElementById  iframe   style pointerEvents   auto     lt div class  maps  onclick  document getElementById  iframe   style pointerEvents   auto   gt      lt iframe id  iframe  src    width  100   height  450  frameborder  0  style  border 0  allowfullscreen gt  lt  iframe gt   lt  div gt

User · Answer

if you have an iframe using Google map embedded API like this      lt iframe width  320  height  400  frameborder  0  src  https   www google com maps embed v1 place q Cagli       gt  lt  iframe gt    you can add this css style  pointer-event none  ES    lt iframe width  320  height  400  frameborder  0  style  pointer-event none   src  https   www google com maps embed v1 place q Cagli       gt  lt  iframe gt

User · Answer

Here is my simple solution   Put your iframe in a div with a class called  maps  for example   This will be the CSS for your iframe   maps iframe   pointer-events  none     And here is a little javascript that will set the pointer-events property of the iframe to  auto  when you hover the div element for at least 1 second  works best for me - set it to whatever you like  and clears the timeout set it to  none  again when the mouse leaves the element   var maptimer       maps   hover function        maptimer   setTimeout function                maps   find  iframe   css  pointer-events    auto          1000     function        clearTimeout maptimer           maps   find  iframe   css  pointer-events    none          Cheers

User · Answer

Using answer from  nathanielperales i ve added hover function cause for me it works better when user loses focus on map to stop scrolling again        function            mapa   hover function            stopScroll                           function              mapa iframe   css  pointer-events    none                 function stopScroll        mapa   click function              mapa iframe   css  pointer-events    auto

[google-maps] Disable mouse scroll wheel zoom on embedded Google Maps

Examples related to google-maps

Examples related to scrollwheel