google-maps - street - maptypecontrol google maps

Desactive el zoom de la rueda de desplazamiento del mouse en Google Maps integrado

Question

Estoy trabajando en un sitio de WordPress donde los autores usualmente incorporan Google Maps utilizando iFrames en la mayoría de las publicaciones.

¿Hay alguna forma de desactivar el zoom con la rueda de desplazamiento del mouse en todos ellos usando Javascript?

Answer 1

Añadir estilo pointer-events:none; esta funcionando bien

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

Answer 2

Acabo de registrar una cuenta en developers.google.com y obtengo un token para llamar a la API de Google Maps, y simplemente deshabilito esto (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
});
}

Answer 3

Agrega esto a tu script:

function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById(''map''), {
zoom: 12,
center: uluru,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}

Answer 4

Aquí está mi solución simple.

Ponga su iframe en un div con una clase llamada "mapas", por ejemplo.

Este será el CSS para tu iframe.

.maps iframe { pointer-events: none }

Y aquí hay un pequeño javascript que establecerá la propiedad puntero-eventos del iframe en "auto" cuando desplace el elemento div durante al menos 1 segundo (funciona mejor para mí, configúrelo como desee) y borra el tiempo de espera / configúrelo en "ninguno" de nuevo cuando el mouse abandone el elemento.

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

Aclamaciones.

Answer 5

Aquí estaría mi enfoque para esto.

Pop esto en mi main.js o archivo similar:

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

Luego simplemente inserte un div vacío donde desee que aparezca el mapa en su página.

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

Obviamente, también deberá llamar a la API de Google Maps. Simplemente creé un archivo llamado mapi.js y lo lancé a mi carpeta / js. Este archivo necesita ser llamado antes que el javascript anterior.

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

Cuando llame al archivo mapi.js, asegúrese de pasar el atributo false del sensor.

es decir: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>

La nueva versión 3 de la API requiere la inclusión de un sensor por algún motivo. Asegúrese de incluir el archivo mapi.js antes de su archivo main.js.

Answer 6

Aquí hay una solución simple. Simplemente configure los pointer-events: none CSS al <iframe> para deshabilitar el desplazamiento del mouse.

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

Si desea que el desplazamiento del mouse se active cuando el usuario haga clic en el mapa, use el siguiente código JS. También deshabilitará el desplazamiento del mouse nuevamente cuando el mouse se mueva fuera del mapa.

$(function() {
$(''#gmap-holder'').click(function(e) {
$(this).find(''iframe'').css(''pointer-events'', ''all'');
}).mouseleave(function(e) {
$(this).find(''iframe'').css(''pointer-events'', ''none'');
});
})

Answer 7

Bueno, para mi la mejor solución fue simplemente usar así:

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

Consideraciones:

Lo mejor sería agregar una superposición con una transparencia más oscura con un texto: " Haga clic para explorar " cuando la rueda del mouse está desactivada. Pero cuando se activa (después de hacer clic en ella), la transparencia con el texto desaparecerá y el usuario podrá navegar. el mapa como se esperaba. ¿Alguna pista de cómo hacer eso?

Answer 8

Después de hacer algunas investigaciones tienes 2 opciones. Dado que los nuevos mapas api con iframe incrustado no parecen admitir la desactivación de la rueda del ratón.

Primero sería usar los mapas antiguos de google ( https://support.google.com/maps/answer/3045828?hl=en ).

El segundo sería crear una función javascript para simplificar la incorporación de un mapa para cada comentario y usar parámetros (es un código de ejemplo solo para señalar la ubicación que no muestra la solución exacta)

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

Answer 9

En Google Maps v3 ahora puede desactivar el desplazamiento para hacer zoom, lo que lleva a una experiencia de usuario mucho mejor. Otras funciones del mapa seguirán funcionando y no necesitas divs adicionales. También pensé que debería haber algún comentario para el usuario para que pueda ver cuándo está habilitado el desplazamiento, así que agregué un borde del mapa.

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

Answer 10

Esta es una solución con CSS y Javascript (es decir. Jquery, pero también funciona con Javascript puro). Al mismo tiempo, el mapa es sensible. Evite el mapa para hacer zoom cuando se desplaza, pero el mapa se puede activar haciendo clic en él.

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

Que te diviertas !

Answer 11

Estaba teniendo el mismo problema: al desplazar la página, el puntero se convierte en el mapa, comienza a acercar / alejar el mapa en lugar de continuar desplazándose por la página. :(

Así que resolví esto poniendo un div con un .overlay exactamente antes de cada inserción de iframe gmap, vea:

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

En mi CSS creé la clase:

.overlay {
background:transparent;
position:relative;
width:640px;
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}

El div cubrirá el mapa, evitando que los eventos de puntero lleguen a él. Pero si hace clic en el div, se vuelve transparente a los eventos de puntero, activando el mapa de nuevo!

Espero haberte ayudado :)

Answer 12

Este es mi enfoque. Me resulta fácil de implementar en varios sitios web y usarlo todo el tiempo

CSS y 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>

En el HTML, deseará envolver el iframe en un 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>

Espero que esto ayude a cualquiera que busque una solución simple.

Answer 13

Esto le dará un Google Map sensible que detendrá el desplazamiento en el iframe, pero una vez que lo haga clic, le permitirá hacer zoom.

Copie y pegue esto en su html, pero reemplace el enlace iframe con el suyo. Es un artículo en él con un ejemplo: deshabilite el zoom de la rueda de desplazamiento del mouse en los iframes integrados de Google Map

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

Answer 14

Estoy reeditando el código escrito por #nathanielperales que realmente me funcionó. Sencillo y fácil de atrapar, pero funciona solo una vez. Así que agregué mouseleave () en JavaScript. Idea adaptada de #Bogdan Y ahora es perfecta. Prueba esto. Los créditos van para #nathanielperales y #Bogdan. Acabo de combinar ambas ideas. Gracias chicos. Espero que esto ayude a otros también ...

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

Improvisa adáptate supérate

Y aquí hay un ejemplo de jsFiddle.

Answer 15

Extendí la solución de @nathanielperales.

Debajo de la descripción del comportamiento:

• haga clic en el mapa para habilitar el desplazamiento
• cuando el ratón abandone el mapa, deshabilite el desplazamiento

Debajo del código javascript:

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

Y aquí hay un ejemplo de jsFiddle .

Answer 16

Hay una solución asombrosa y fácil.

Debe agregar una clase personalizada en su css que establezca los eventos de puntero para asignar lienzo a ninguno:

.scrolloff{
pointer-events: none;
}

Luego, con jQuery, puede agregar y eliminar esa clase en función de diferentes eventos, por ejemplo:

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

He creado un ejemplo en jsfiddle , espero que ayude!

Answer 17

He creado un plugin jQuery muy simple para resolver el problema. Compruébelo en 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>

Answer 18

Intenté la primera respuesta en esta discusión y no funcionó para mí sin importar lo que hice, así que encontré mi propia solución:

Envuelva el iframe con una clase (.maps en este ejemplo) e idealmente incluya código correspondiente: http://embedresponsively.com/ - Cambie el CSS del iframe a pointer-events: none y luego use la función de clic de jQuery para el elemento principal que puede cambiar los iframes css a 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");
});

Estoy seguro de que hay una forma única de JavaScript de hacer esto, si alguien quiere agregar algo a esto, siéntase libre.

La forma de JavaScript para reactivar los eventos de puntero es bastante simple. Solo asigne un ID al iFrame (es decir, "iframe"), luego aplique un evento onclick al div cointainer:

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>

Answer 19

La forma más sencilla de hacerlo es utilizando un pseudo-elemento como :before o :after .
Este método no requerirá ningún elemento HTML adicional o jQuery.
Si tenemos por ejemplo esta estructura html:

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

Luego, todo lo que tenemos que hacer es hacer que la envoltura sea relativa al pseudo-elemento que crearemos para evitar el desplazamiento.

.map_wraper{
position:relative;
}

Después de esto, crearemos el pseudo-elemento que se colocará sobre el mapa para evitar el desplazamiento:

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

Y ya está, no jquery sin elementos html adicionales! Aquí hay un ejemplo de jsfiddle que funciona: http://jsfiddle.net/e6j4Lbe1/

Answer 20

Me topé con este problema y utilicé una mezcla de dos respuestas muy útiles sobre esta pregunta: la respuesta de czerasz y la respuesta de massa .

Ambos tienen mucha verdad, pero en alguna parte de mis pruebas, descubrí que uno no funcionaba para dispositivos móviles y tenía un soporte pobre de IE (solo funciona en IE11). Esta es la solución de nathanielperales, luego extendida por czerasz, que se basa en punteros-eventos css y que no funciona en el móvil (no hay puntero en el móvil) y caniuse.com/#search=pointer-events ninguna versión de IE que no sea v11 . Normalmente no me importaría menos, pero hay un montón de usuarios y queremos una funcionalidad consistente, así que opté por la solución de superposición, utilizando un contenedor para facilitar la codificación.

Entonces, mi marca se ve así:

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

Entonces los estilos son así:

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

Por último el guión:

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

También agregué mi solución probada en una lista de GitHub , si quieres obtener cosas de allí ...

Answer 21

Para deshabilitar el zoom de la rueda de desplazamiento del mouse en Google Maps integrado, solo tiene que establecer los eventos de puntero de la propiedad css del iframe en ninguno:

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

Eso es todo ... bastante limpio ¿eh?

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

Answer 22

Sí, es bastante fácil. Me enfrenté a un problema similar. Simplemente agregue la propiedad css "punteros-eventos" al div iframe y ajústelo a ''ninguno'' .

Ejemplo: <iframe style = "pointer-events: none" src = ........>

SideNote: esta solución deshabilitaría todos los demás eventos del mouse en el mapa. Funcionó para mí ya que no requerimos ninguna interacción del usuario en el mapa.

Answer 23

Usando la respuesta de @nathanielperales, agregué la función de desplazamiento porque para mí funciona mejor cuando el usuario pierde el enfoque en el mapa para detener el desplazamiento nuevamente :)

$(function(){
$(''.mapa'').hover(function(){
stopScroll();},
function () {
$(''.mapa iframe'').css("pointer-events", "none");
});
});
function stopScroll(){
$(''.mapa'').click(function () {
$(''.mapa iframe'').css("pointer-events", "auto");
});
}

Answer 24

Variaciones sobre un tema: una solución simple con jQuery, sin necesidad de editar CSS.

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

El detector de elementos activados se adjunta al elemento principal, por lo que si el elemento principal actual es más grande, simplemente puede ajustar el iframe con un div antes de la tercera línea.

Espero que sea de utilidad para alguien.

Answer 25

El más sencillo :

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

Answer 26

Aquí está mi opinión sobre la respuesta de @nathanielperales extendida por @chams, ahora nuevamente extendida por mí.

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

Answer 27

Para google maps v2 - GMap2:

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

Answer 28

Si tienes un iframe usando la API incorporada de Google Maps como esta:

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

puede agregar este estilo css: puntero-evento: ninguno; ES

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

Answer 29

Aquí está mi solución para el problema, estaba construyendo un sitio WP, así que aquí hay un pequeño código PHP. Pero la clave está scrollwheel: false,en el objeto de mapa.

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

Espero que esto ayude. Aclamaciones

Answer 30

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