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?

or disable it directly through JS: map.disableScrollWheelZoom(); — Th3Alchemist, Feb 24 '14 at 16:10
I'm afraid you can't. Because of security-restrictions there is no scripting-access to the map , and AFAIK the is no URL-parameter available that gives you the option to disable it. — Dr.Molle, Feb 24 '14 at 17:44
Have exactly same problem. Want to disable mouse scroll events on embeded with iframe map. Haven't found it yet. — Grzegorz, Feb 25 '14 at 10:49
This is embedded maps, not sure why people post solutions to using the maps JS library — zanderwar, Oct 27 '16 at 05:19

score 258 · Answer 1 · edited Mar 25 '14 at 03:18

258

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:

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

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

edited Mar 25 '14 at 03:18

Josua Marcel C

3,122
6
45
87

answered Mar 21 '14 at 19:22

Massa

3,670
1
17
16

9

This is a great solution. In my case, I had to specify a `z-index` in order for it to overlay correctly, though. – RCNeil Apr 17 '14 at 14:23
This solution helps a lot! But I rather use an absolute positioned layer with same width and height of the map instead of a relative layer over the map. Thanks for share! – ed1nh0 May 26 '14 at 20:42
1

IMO the best solution to this problem yet! We been facing this issue for a long time and this makes for a nice and pretty clean reusable fix! – Diego Paladino Aug 05 '14 at 05:47
11

this should be marked as the answer, although probably easier to set the overlay as absolutely positioned to a parent container and then just width 100% height 100%, also doesnt need a background property. – hcharge Aug 08 '14 at 10:56
1

this seems like it should work, but how the div becomes 'transparent' to pointer events once clicked is unclear to me. what exactly is the onclick event on the div supposed to do? it seems to me that by setting pointer-events to `none` the div is being made opaque to events not transparent. what am i missing? – fraxture Sep 30 '14 at 21:13
1

nevermind, i think i understand. by making the overlay's pointer-events attribute 'none', the pointer events penetrate to the iframe. clever! – fraxture Sep 30 '14 at 21:29
4

I`ve created a very simple jQuery plugin to automate this. Check it at https://github.com/diazemiliano/mapScrollOff – Emiliano Díaz Feb 03 '15 at 15:59
@massa : this working only when user do up down mouse wheel. not when user drag right left direction. http://jsfiddle.net/prashantptapase/ny46jtht/ – Prashant Tapase Feb 23 '15 at 11:22
8

Is there a straightforward way to extend this solution so that scrollwheel events are ignored, but left clicks are not ignored? This solution is nice, but requires users to click twice on the "Directions" hyperlink at the top of the map (once to penetrate the div and then again to click on the hyperlink itself.) – jptsetme Apr 11 '15 at 15:35
Nice Answer! It's really work. You deserve my upvote :) – BartSabayton Apr 16 '15 at 03:50
Thanks. This very simple and 100% accurate. Really appreciated. – WP Learner Nov 19 '15 at 06:05
You could also add this as a `:before` pseudo element – Oliver Tappin Jan 02 '16 at 18:26
1

You may also want to put both elements in a container, and position them absolutely (`top: 0`). Thus you won't have them overlapping other content. – cptstarling Feb 17 '16 at 18:52
This worked for me flawlessly on opera v36, FF v46, Chrome v49, Edge and IE11. Thank you. – Pedro Sousa May 02 '16 at 09:50
1

It might be useful to reset pointer-events after a while: `onclick="style.pointerEvents='none'; window.setTimeout(function() {style.pointerEvents='auto'}, 6000)"` – stewo Nov 08 '16 at 22:51
I have seen this solution in several places. It kind of works but at least on Safari it creates problems if in a container div. The container div grows upwards and will prevent elements above, such as menus, from being clickable (even after the iframe has become clickable). Maybe cptstarling's suggestion could help, but I found that Emiliano Diaz jQuery plugin (see his comment) works lika a charm - it's a really good solution! – Christer Fernstrom Mar 06 '21 at 07:58

score 140 · Answer 2 · edited Nov 13 '16 at 09:47

140

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>

edited Nov 13 '16 at 09:47

Rafael Corrêa Gomes

1,751
1
22
31

answered Aug 31 '14 at 03:40

nathanielperales

1,501
1
9
7

5

Thanks for "without API" solution. +1 – Severe Torture Apr 13 '15 at 06:53
21

You can also add this to bring it back to its original state when the mouse leaves: $('.maps').mouseleave(function() { $('.maps iframe').css("pointer-events", "none"); }); – Luis Apr 28 '15 at 14:38
5

Just a note: using `pointer-events: none` will prevent any interaction with the map (drag, navigation, clicks, etc). – LuBre Dec 11 '15 at 10:37
@LuBre yes, that is understood, that is why there's the jQuery click function to change it to auto. – nathanielperales Dec 12 '15 at 17:54
1

Great answer! You want to make sure you're enabling the right map and not all on the page `$(this).find('iframe').css("pointer-events", "auto");` – Tom Prats Jan 30 '16 at 05:33
This is the better solution. – Jordan Oct 01 '16 at 13:30
some one mark this as choosen answer. This thread not showing it – Infant Rosario Nov 10 '16 at 05:10
@natanielperales but if the mouse button is disabled, how is the jQuery click/html onclick going to fire in order to catch the event? To disable just the mousewheel, you need something like `$("#map").on("mousewheel DOMMouseScroll", mouseRipple);` where mouseRipple contains `$("#map_container").parent().trigger(e);` if you want it to still scroll. – mpag May 17 '17 at 17:29

score 53 · Answer 3 · answered Sep 18 '14 at 05:12

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.

Thank you for this snipped. I used it with the following addition in the end: `$('.maps.embed-container').find('iframe').css("pointer-events", "none");` — lhermann, Aug 12 '16 at 11:17
Thanks for the code. It actually solved a different problem I had. I embedded some charts from Google Spreadsheet and scrolling with the mouse wheel stopped working for the whole page for some reason. Your code made it scroll again with the mouse wheel. Thanks again. — Scott M. Stolz, Apr 27 '17 at 13:10

cHaMs · Answer 4 · 2015-04-27T12:38:44.267

32

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.

edited Apr 27 '15 at 12:38

answered Apr 23 '15 at 08:28

cHaMs

581
6
8

1

Cleanest solution. Nice! But ALL the solutions have a problem: Users have to click the map twice. How can pass through the click immediately, so it only takes one click? – Loren Aug 22 '15 at 19:52
1

Maybe you could avoid the click by switching to `pointer-events: auto` only after the mouse has "hovered" over the map for a certain duration? i.e. start timer when mouse enters iframe and reset it when mouse leaves. If timer gets to X milliseconds, switch to `pointer-events: auto`. And whenever mouse leaves the iframe you just switch back to `pointer-events: none`. – stucampbell Aug 25 '15 at 18:53
I prefer to use dblclick instead of click, anyway good solution. – Moxet Khan Aug 28 '16 at 09:28

Hassam Raja · Answer 5 · 2014-05-21T01:53:15.280

25

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:< 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.

edited May 21 '14 at 01:53

answered May 21 '14 at 01:45

Hassam Raja

267
3
3

21

Why not just use an image then? you're loading a lot of extra assets just to disable it all. – deweydb Jun 11 '14 at 04:40
2

Yes but the i can't click on the widgets – Jeffrey Nicholson Carré Jun 12 '14 at 05:33
1

please note that this won't work on IE<11 - http://caniuse.com/#search=pointer-events – totallyNotLizards Apr 13 '15 at 11:03
@deweydb - isn't that illegal? – Matt Saunders Oct 02 '15 at 09:45
@MattSaunders not sure if this was the case at the time, but it is now. You can load a static map image direct from the Google API, perhaps this is what deweydb was suggesting? Would certainly be a feasible way around the problem. – azariah Jun 08 '16 at 06:22
@MattSaunders this is what Hassam was referring to: https://developers.google.com/maps/documentation/static-maps/intro – user1380540 May 24 '17 at 21:01

score 20 · Answer 6 · answered Jun 05 '14 at 12:07

20

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

answered Jun 05 '14 at 12:07

borchvm

3,533
16
44
45

score 13 · Answer 7 · answered Feb 25 '14 at 11:23

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 */
}

Bogdan · Answer 8 · 2014-10-03T10:55:33.470

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!

This also works with the Google Maps Embed API - just replace the map_canvas with the embed iframe. Note that the click event is on the _outer_ element, but scrolloff is on the _inner_ element (it's correct in the answer/jsfiddle, just in case you're transcribing rather than copy/pasting) — Jxtps, Oct 21 '14 at 16:59

score 8 · Answer 9 · answered Apr 14 '16 at 23:34

8

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

answered Apr 14 '16 at 23:34

RSiqueira

91
2
5

So much better than jQuery hacks! – Dániel Kis-Nagy Jul 21 '17 at 09:37

score 7 · Answer 10 · answered Jul 06 '15 at 14:01

7

Here is a simple solution. Just set the pointer-events: none CSS to the <iframe> to disable mouse scroll.

<div id="gmap-holder">
    <iframe width="100%" height="400" frameborder="0" style="border:0; pointer-events:none"
            src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe>
</div>

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

answered Jul 06 '15 at 14:01

Manish Singh

5,848
4
43
31

**!!!** Also Note, Imho *pointer-events* **disabled all click Event's** for this Iframe. – stephanfriedrich Aug 06 '15 at 14:00
The click events are disabled only for the iframe. But if you are using the JS code, as soon as the mouse enters the div.gmap-holder, the click events will get activated again. – Manish Singh Aug 11 '15 at 10:51
This worked brilliantly for me! Most of the solutions were incompatible with WordPress: onclick is scrubbed, and the sometimes the width of the iframe isn't honoured, but this worked like a charm. After putting the JS code away, all one needs to do is reference the id="gmap-holder". Perfect. Thanks Manish. – usonianhorizon Sep 18 '15 at 21:05

score 7 · Answer 11 · answered Dec 05 '16 at 18:06

This is my approach. I find it easy to implement on various websites and use it all the time

CSS and JavaScript:

<style type="text/css">
.scrolloff iframe   {
    pointer-events: none ;
}
</style>

<script type="text/javascript">
function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click

}

function scrollOff() {
    $('#map').addClass('scrolloff'); 

}
</script>

In the HTML, you will want to wrap the iframe in a div. <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >

function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click
   
}

function scrollOff() {
    $('#map').addClass('scrolloff'); // set the pointer events true on click
    
}

.scrolloff iframe   {
        pointer-events: none ;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><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></iframe></div>

Hope this helps anyone looking for a simple solution.

score 4 · Answer 12 · answered Sep 13 '15 at 23:01

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>

It will also disable the double click zoom :) – w3debugger Dec 01 '15 at 01:02 — w3debugger, Dec 01 '15 at 01:02
Also disables zoom-in, zoom-out, directions etc – zanderwar Oct 27 '16 at 05:16 — zanderwar, Oct 27 '16 at 05:16

score 4 · Answer 13 · answered Mar 29 '16 at 09:30

Well, for me the best solution was to simply use like this:

HTML:

<div id="google-maps">
<iframe frameborder="0" height="450" src="***embed-map***"  width="100"</iframe>
</div>

CSS:

#google-maps iframe { pointer-events:none; }

JS:

<script>
  $(function() {
    $('#google-maps').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'auto');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
  })
</script>

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?

score 3 · Answer 14 · edited Jan 09 '15 at 16:54

3

Add style pointer-events:none; this working fine

<iframe style="pointer-events:none;" src=""></iframe>

edited Jan 09 '15 at 16:54

Philippe Boissonneault

3,949
3
26
33

answered Jan 09 '15 at 14:13

Mohan

45
8

Emiliano Díaz · Answer 15 · 2016-08-01T22:59:17.010

I`ve created a very simple jQuery plugin to resolve the problem. Check it at https://diazemiliano.github.io/googlemaps-scrollprevent

(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>

score 3 · Answer 16 · answered Aug 06 '15 at 13:05

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/

Clever idea. However, like some of the other answers, this captures everything, not just mousewheel events. — likeitlikeit, Aug 25 '15 at 09:34

score 3 · Answer 17 · answered Feb 15 '16 at 15:49

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.

score 2 · Answer 18 · answered Dec 11 '14 at 12:27

2

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

answered Dec 11 '14 at 12:27

Maciek Kwapinski

31
4

The thing is that we loose the navigate function, for me is very important in mobile devices. I've created a very simple jQuery plugin that you can modify if you want. Check it at https://github.com/diazemiliano/mapScrollOff – Emiliano Díaz Feb 04 '15 at 12:29

score 2 · Answer 19 · answered May 29 '15 at 09:04

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.

score 1 · Answer 20 · edited May 23 '17 at 12:02

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...

score 1 · Answer 21 · answered Sep 08 '15 at 12:45

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 !

Gerry · Answer 22 · 2016-03-24T04:20:44.487

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

score 1 · Answer 23 · answered Oct 20 '16 at 22:07

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>

score 0 · Answer 24 · answered Jul 03 '14 at 16:38

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.

<div id="map"></div>

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('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  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: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>

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.

score 0 · Answer 25 · answered Jul 11 '14 at 12:17

0

For google maps v2 - GMap2:

ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();

answered Jul 11 '14 at 12:17

user956584

5,316
3
40
50

score 0 · Answer 26 · edited Mar 27 '15 at 17:40

0

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>

edited Mar 27 '15 at 17:40

Jens

67,715
15
98
113

answered Mar 27 '15 at 17:30

Frank Dark

1

score 0 · Answer 27 · answered Mar 31 '16 at 01:11

Here's my take on the @nathanielperales answer extended by @chams, now extended again by me.

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

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

score 0 · Answer 28 · answered Oct 24 '16 at 18:58

0

The simplest one:

<div id="myIframe" style="width:640px; height:480px;">
   <div style="background:transparent; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer;" onClick="style.pointerEvents='none'"></div>
   <iframe src="https://www.google.com/maps/d/embed?mid=XXXXXXXXXXXXXX" style="width:640px; height:480px;"></iframe>
</div>

answered Oct 24 '16 at 18:58

T.Todua

53,146
19
236
237

This little absolute div worked for my use case, thanks – Dan Jul 29 '21 at 04:21

score 0 · Answer 29 · answered Oct 17 '21 at 15:49

0

This little free plugin can do it - https://mapcraftpro.com/

answered Oct 17 '21 at 15:49

Nikolay Dyankov

6,491
11
58
79

score -1 · Answer 30 · answered Jul 31 '17 at 14:18

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: <?php echo $latitude; ?>, lng: <?php echo $Longitude; ?>};
        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

Disable mouse scroll wheel zoom on embedded Google Maps

30 Answers30

Linked

Related