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

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

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

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'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

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

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

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

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

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

<style>
    .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 */
    }
</style>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="100%" height="480"></iframe>

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

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

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

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

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

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:

<div class="map_wraper">

    <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></iframe>

</div>

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

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

if you have an iframe using Google map embedded API like this :

 <iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

you can add this css style: pointer-event:none; ES.

<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

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

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

<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;"> 
    <iframe id="googlemap" src="http://your-embed-url" height="350"></iframe>
</div>

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

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

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

var mapOptions        scrollwheel  false     center  latlng     mapTypeId  google maps MapTypeId ROADMAP

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

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

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

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

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

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

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

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:

<div class="map embed-container">
  <div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
  <div class="map-overlay" style="display: block;"></div>
  <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"></iframe>
</div>

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

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

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

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:

<style>
#googlemap iframe {
    pointer-events:none;
}
</style>

Thats All.. Pretty neat huh?

<div id="googlemap">
    <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></iframe>
</div>

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

The answer is

Examples related to google-maps

Examples related to scrollwheel

Tags