Disable mouse scroll wheel zoom on embedded Google Maps
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?
scrollwheel to false.
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 :)
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>
pointer-events: none will prevent any interaction with the map (drag, navigation, clicks, etc).
$(this).find('iframe').css("pointer-events", "auto");
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.
$('.maps.embed-container').find('iframe').css("pointer-events", "none");
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.
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.
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.
var mapOptions = {
scrollwheel: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
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 */
}
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!
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
});
}
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');
});
})
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 ; }
Hope this helps anyone looking for a simple solution.
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>
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>
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?
Add style pointer-events:none; this working fine
<iframe style="pointer-events:none;" src=""></iframe>
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/
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.
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; }
"Start Scroll Prevent" "Stop Scroll Prevent"
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");
});
}
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.
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...
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 !
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')
});
};
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>
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.
For google maps v2 - GMap2:
ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();
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>
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'));
});
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>
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
Follow WeChat
Success story sharing
z-indexin order for it to overlay correctly, though.