Disable mouse scroll wheel zoom on embedded Google Maps

Asked 24/2, 2014 at 15:54 Answered 17/10, 2021 at 15:49

google-maps scrollwheel

203

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?

Exorcise answered 24/2, 2014 at 15:54 Comment(5)

Set map option scrollwheel to false. – Perfectionism 24/2, 2014 at 15:57

or disable it directly through JS: map.disableScrollWheelZoom(); – Venatic 24/2, 2014 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. – Marcy 24/2, 2014 at 17:44

Have exactly same problem. Want to disable mouse scroll events on embeded with iframe map. Haven't found it yet. – Dinsdale 25/2, 2014 at 10:49

This is embedded maps, not sure why people post solutions to using the maps JS library – Dripstone 27/10, 2016 at 5:19

259

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

Johm answered 21/3, 2014 at 19:22 Comment(16)

This is a great solution. In my case, I had to specify a z-index in order for it to overlay correctly, though. – Magness 17/4, 2014 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! – Across 26/5, 2014 at 20:42

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! – Suppositive 5/8, 2014 at 5:47

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. – Spoofery 8/8, 2014 at 10:56

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? – Noninterference 30/9, 2014 at 21:13

nevermind, i think i understand. by making the overlay's pointer-events attribute 'none', the pointer events penetrate to the iframe. clever! – Noninterference 30/9, 2014 at 21:29

I`ve created a very simple jQuery plugin to automate this. Check it at github.com/diazemiliano/mapScrollOff – Looby 3/2, 2015 at 15:59

@massa : this working only when user do up down mouse wheel. not when user drag right left direction. jsfiddle.net/prashantptapase/ny46jtht – Obstetric 23/2, 2015 at 11:22

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.) – Galwegian 11/4, 2015 at 15:35

Nice Answer! It's really work. You deserve my upvote :) – Berate 16/4, 2015 at 3:50

Thanks. This very simple and 100% accurate. Really appreciated. – Isley 19/11, 2015 at 6:5

You could also add this as a :before pseudo element – Calcareous 2/1, 2016 at 18:26

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. – Impressive 17/2, 2016 at 18:52

This worked for me flawlessly on opera v36, FF v46, Chrome v49, Edge and IE11. Thank you. – Biller 2/5, 2016 at 9:50

It might be useful to reset pointer-events after a while: onclick="style.pointerEvents='none'; window.setTimeout(function() {style.pointerEvents='auto'}, 6000)" – Hinds 8/11, 2016 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! – Simp 6/3, 2021 at 7:58

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>

Mcghee answered 31/8, 2014 at 3:40 Comment(7)

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"); }); – Pyromancy 28/4, 2015 at 14:38

Just a note: using pointer-events: none will prevent any interaction with the map (drag, navigation, clicks, etc). – Lincoln 11/12, 2015 at 10:37

@Lincoln yes, that is understood, that is why there's the jQuery click function to change it to auto. – Mcghee 12/12, 2015 at 17:54

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"); – Hildegard 30/1, 2016 at 5:33

This is the better solution. – Sima 1/10, 2016 at 13:30

some one mark this as choosen answer. This thread not showing it – Biddy 10/11, 2016 at 5: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. – Polygenesis 17/5, 2017 at 17:29

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.

Gilroy answered 18/9, 2014 at 5:12 Comment(2)

Thank you for this snipped. I used it with the following addition in the end: $('.maps.embed-container').find('iframe').css("pointer-events", "none"); – Batiste 12/8, 2016 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. – Accurate 27/4, 2017 at 13:10

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.

Judd answered 23/4, 2015 at 8:28 Comment(3)

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? – Dieselelectric 22/8, 2015 at 19:52

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. – Montevideo 25/8, 2015 at 18:53

I prefer to use dblclick instead of click, anyway good solution. – Shalondashalt 28/8, 2016 at 9:28

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.

Fatuitous answered 21/5, 2014 at 1:45 Comment(6)

Why not just use an image then? you're loading a lot of extra assets just to disable it all. – Vivyanne 11/6, 2014 at 4:40

Yes but the i can't click on the widgets – Tagmeme 12/6, 2014 at 5:33

please note that this won't work on IE<11 - caniuse.com/#search=pointer-events – Wellspring 13/4, 2015 at 11:3

@deweydb - isn't that illegal? – Carabin 2/10, 2015 at 9: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. – Bultman 8/6, 2016 at 6:22

@MattSaunders this is what Hassam was referring to: developers.google.com/maps/documentation/static-maps/intro – Uranalysis 24/5, 2017 at 21:1

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

Ashtoreth answered 5/6, 2014 at 12:7 Comment(0)

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

Dinsdale answered 25/2, 2014 at 11:23 Comment(0)

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!

Spatiotemporal answered 3/10, 2014 at 9:12 Comment(1)

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) – Isolative 21/10, 2014 at 16:59

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

Lauritz answered 14/4, 2016 at 23:34 Comment(1)

So much better than jQuery hacks! – Shiva 21/7, 2017 at 9:37

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

Mcadams answered 6/7, 2015 at 14:1 Comment(3)

!!! Also Note, Imho pointer-events disabled all click Event's for this Iframe. – Pros 6/8, 2015 at 14:0

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. – Mcadams 11/8, 2015 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. – Leaper 18/9, 2015 at 21:5

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.

Nullifidian answered 5/12, 2016 at 18:6 Comment(0)

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>

Phototelegraph answered 13/9, 2015 at 23:1 Comment(2)

It will also disable the double click zoom :) – Triplicity 1/12, 2015 at 1:2

Also disables zoom-in, zoom-out, directions etc – Dripstone 27/10, 2016 at 5:16

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?

Uretic answered 29/3, 2016 at 9:30 Comment(0)

Add style pointer-events:none; this working fine

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

Tritanopia answered 9/1, 2015 at 14:13 Comment(0)

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>

Enugu answered 3/2, 2015 at 15:59 Comment(0)

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/

Herzog answered 6/8, 2015 at 13:5 Comment(2)

Clever idea. However, like some of the other answers, this captures everything, not just mousewheel events. – Curley 25/8, 2015 at 9:34

i`m glad it helped you out ! – Herzog 9/10, 2015 at 9:16

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.

Dowski answered 15/2, 2016 at 15:49 Comment(0)

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

Gethsemane answered 11/12, 2014 at 12:27 Comment(1)

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 github.com/diazemiliano/mapScrollOff – Looby 4/2, 2015 at 12:29

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.

Bavardage answered 29/5, 2015 at 9:4 Comment(0)

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

Gramineous answered 25/11, 2014 at 15:9 Comment(0)

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 !

Tutto answered 8/9, 2015 at 12:45 Comment(0)

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

Wilton answered 24/3, 2016 at 4:5 Comment(0)

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>

Ebarta answered 20/10, 2016 at 22:7 Comment(0)

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.

Landward answered 3/7, 2014 at 16:38 Comment(0)

For google maps v2 - GMap2:

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

Lithography answered 11/7, 2014 at 12:17 Comment(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>

Rigmarole answered 27/3, 2015 at 17:30 Comment(0)

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

Lugar answered 31/3, 2016 at 1:11 Comment(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>

Kibosh answered 24/10, 2016 at 18:58 Comment(1)

This little absolute div worked for my use case, thanks 👍 – Valentinavalentine 29/7, 2021 at 4:21

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

Totem answered 17/10, 2021 at 15:49 Comment(0)

-1

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

Autobiographical answered 31/7, 2017 at 14:18 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags