Deshabilite el zoom de la rueda de desplazamiento del mouse en Google Maps incorporado

198

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

¿Hay alguna manera de desactivar el zoom a través de la rueda de desplazamiento del mouse en todos ellos usando Javascript?

google-maps scrollwheel holiveira
fuente

32

Establezca la opción de mapa scrollwheelen false.

Anto Jurković

o deshabilítelo directamente a través de JS: map.disableScrollWheelZoom ();

Th3Alchemist

44

Me temo que no puedes. Debido a las restricciones de seguridad, no hay acceso de secuencias de comandos al mapa, y AFAIK no hay ningún parámetro de URL disponible que le brinde la opción de deshabilitarlo.

Dr.Molle

Tiene exactamente el mismo problema. Desea deshabilitar los eventos de desplazamiento del mouse en incrustado con el mapa de iframe. Aún no lo he encontrado.

Grzegorz

77

Estos son mapas incrustados, no estoy seguro de por qué las personas publican soluciones para usar la biblioteca JS de mapas

zanderwar

255

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

Así que resolví esto poniendo un divcon .overlayexactamente antes de cada iframeinserción de 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 para los eventos de puntero, ¡activando el mapa nuevamente!

Espero que te ayuden :)

Massa
fuente

9

Esta es una gran solución. Sin z-indexembargo, en mi caso, tuve que especificar un para que se superponga correctamente.

RCNeil

1

¡OMI, la mejor solución a este problema todavía! ¡Hemos enfrentado este problema durante mucho tiempo y esto lo convierte en una solución reutilizable agradable y bastante limpia!

Diego Paladino

11

esto debería marcarse como la respuesta, aunque probablemente sea más fácil establecer la superposición como posicionada absolutamente en un contenedor primario y luego solo ancho 100% altura 100%, tampoco necesita una propiedad de fondo.

recarga el

3

He creado un complemento jQuery muy simple para automatizar esto. Compruébalo en github.com/diazemiliano/mapScrollOff

Emiliano Díaz

8

¿Existe una manera directa de extender esta solución para que los eventos de rueda de desplazamiento se ignoren, pero no se ignoren los clics izquierdos? Esta solución es buena, pero requiere que los usuarios hagan clic dos veces en el hipervínculo "Indicaciones" en la parte superior del mapa (una vez para penetrar el div y luego otra vez para hacer clic en el hipervínculo).

jptsetme

136

Intenté la primera respuesta en esta discusión y no funcionó para mí, no importa lo que hice, así que se me ocurrió mi propia solución:

Envuelva el iframe con una clase (.maps en este ejemplo) e idealmente incruste el código de respuesta: http://embedresponsively.com/ - Cambie el CSS del iframe pointer-events: noney luego use la función de clic de jQuery para el elemento padre. Puede cambiar los iframes css apointer-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 única forma de JavaScript para hacerlo, si alguien quiere agregar a esto, siéntase libre.

La forma de JavaScript para reactivar los eventos de puntero es bastante simple. Simplemente asigne un Id al iFrame (es decir, "iframe"), luego aplique un evento onclick al 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>

nathanielperales
fuente

44

Gracias por la solución "sin API". +1

Tortura severa

21

También puede agregar esto para devolverlo a su estado original cuando el mouse se va: $ ('. Maps'). Mouseleave (function () {$ ('. Maps iframe'). Css ("pointer-events", " ninguna"); });

Luis

55

Solo una nota: el uso pointer-events: noneevitará cualquier interacción con el mapa (arrastre, navegación, clics, etc.).

LuBre

@LuBre sí, eso se entiende, es por eso que existe la función de clic jQuery para cambiarlo a automático.

nathanielperales

1

¡Gran respuesta! Desea asegurarse de que está habilitando el mapa correcto y no todos en la página$(this).find('iframe').css("pointer-events", "auto");

Tom Prats

54

Extendí la solución @nathanielperales.

Debajo de la descripción del comportamiento:

haga clic en el mapa para habilitar el desplazamiento
cuando el mouse sale del mapa, deshabilita 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 .

czerasz
fuente

1

Gracias por esto cortado. Lo utilicé con la siguiente adición al final:$('.maps.embed-container').find('iframe').css("pointer-events", "none");

lhermann

Gracias por el codigo. En realidad resolvió un problema diferente que tenía. Incruste algunos gráficos de la hoja de cálculo de Google y, por alguna razón, el desplazamiento con la rueda del mouse dejó de funcionar durante toda la página. Su código lo hizo desplazarse nuevamente con la rueda del mouse. Gracias de nuevo.

Scott M. Stolz

31

Estoy reeditando el código escrito por #nathanielperales, realmente funcionó para mí. Simple y fácil de atrapar, pero funciona solo una vez. Entonces agregué mouseleave () en JavaScript. Idea adaptada de #Bogdan Y ahora es perfecta. Prueba esto. Los créditos van a #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.

CÁMARAS
fuente

1

Solución más limpia. ¡Agradable! Pero TODAS las soluciones tienen un problema: los usuarios tienen que hacer clic en el mapa dos veces. ¿Cómo puede pasar el clic inmediatamente, por lo que solo se necesita un clic?

Loren

1

¿Tal vez podría evitar el clic cambiando pointer-events: autosolo después de que el mouse se haya "deslizado" sobre el mapa durante una cierta duración? es decir, iniciar el temporizador cuando el mouse ingrese al iframe y restablecerlo cuando el mouse se vaya. Si el temporizador llega a X milisegundos, cambie a pointer-events: auto. Y cada vez que el mouse abandone el iframe, simplemente vuelva a cambiar pointer-events: none.

stucampbell

Prefiero usar dblclick en lugar de clic, de todos modos es una buena solución.

Moxet Khan

25

Sí, es bastante fácil. Me enfrenté a un problema similar. Simplemente agregue la propiedad css "pointer-events" al iframe div y configúrelo en 'none' .

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

Nota al margen: 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.

Hassam Raja
fuente

20

¿Por qué no usar una imagen entonces? está cargando muchos activos adicionales solo para deshabilitarlo todo.

deweydb

2

Sí, pero no puedo hacer clic en los widgets

Jeffrey Nicholson Carré

1

tenga en cuenta que esto no funcionará en IE <11 - caniuse.com/#search=pointer-events

totallyNotLizards

@deweydb: ¿no es ilegal?

Matt Saunders el

@MattSaunders no está seguro de si este era el caso en ese momento, pero lo es ahora. Puede cargar una imagen de mapa estático directamente desde la API de Google, ¿tal vez esto es lo que sugirió deweydb? Sin duda sería una forma viable de solucionar el problema.

azariah

19

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

borchvm
fuente

13

Después de investigar un poco, tienes 2 opciones. Dado que los nuevos mapas api con incrustación de iframe no parecen admitir la desactivación de la rueda del mouse.

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

El segundo sería crear una función de JavaScript para simplificar la incorporación de un mapa para cada comentario y usar parámetros (es un código de muestra solo para señalar la ubicación y no mostrar 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 */
}

Grzegorz
fuente

8

Hay una solución increíble y fácil.

Debe agregar una clase personalizada en su CSS que establezca los eventos de puntero para asignar el 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!

Bogdan
fuente

1

Esto también funciona con la API de inserción de Google Maps: simplemente reemplace map_canvas con el iframe de inserción. Tenga en cuenta que el evento de clic está en el elemento externo , pero el desplazamiento está en el elemento interno (es correcto en la respuesta / jsfiddle, en caso de que esté transcribiendo en lugar de copiar / pegar)

Jxtps

8

Solo registro una cuenta en developers.google.com y obtengo un token para llamar a una API de Maps, y simplemente lo deshabilito así (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
        });
    }

RSiqueira
fuente

¡Mucho mejor que los hacks de jQuery!

Dániel Kis-Nagy

7

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, querrá 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>

Expandir fragmento

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

usuario1588572
fuente

5

Aquí hay una solución simple. Simplemente configure el pointer-events: noneCSS <iframe>para desactivar 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 hace clic en el mapa, utilice 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');
    });
})

manish_s
fuente

!!! También tenga en cuenta que los eventos de puntero Imho deshabilitaron todos los eventos de clic para este Iframe.

stephanfriedrich

Los eventos de clic están deshabilitados solo para el iframe. Pero si está utilizando el código JS, tan pronto como el mouse ingrese al div.gmap-holder, los eventos de clic se activarán nuevamente.

manish_s

¡Esto funcionó brillantemente para mí! La mayoría de las soluciones eran incompatibles con WordPress: onclick se elimina, y a veces no se respeta el ancho del iframe, pero esto funcionó de maravilla. Después de guardar el código JS, todo lo que hay que hacer es hacer referencia al id = "gmap-holder". Perfecto. Gracias manish.

usonianhorizon

4

Para deshabilitar el zoom de la rueda de desplazamiento del mouse en Google Maps incrustado, solo necesita establecer los eventos de puntero de propiedad css del iframe en none:

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

Eso es todo .. Bastante bien, ¿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>

NadirShah Rahat
fuente

2

También deshabilitará el zoom de doble clic :)

w3debugger

También deshabilita el acercamiento,

alejamiento

4

Bueno, para mí la mejor solución era 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>

RESULTADO

Consideraciones:

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

Qatan
fuente

3

Agregue estilo, pointer-events:none;esto funciona bien

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

Mohan
fuente

3

La forma más sencilla de hacerlo es mediante el uso de un pseudo-elemento como :beforeo :after.
Este método no requerirá elementos html o jquery adicionales.
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>

Entonces todo lo que tenemos que hacer es hacer el envoltorio relativo 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 ni elementos html adicionales! Aquí hay un ejemplo de jsfiddle que funciona: http://jsfiddle.net/e6j4Lbe1/

Andrei
fuente

Idea inteligente. Sin embargo, como algunas de las otras respuestas, esto captura todo, no solo los eventos de la rueda del mouse.

likeitlikeit

¡Me alegra que te haya ayudado!

Andrei

3

Aquí está mi solución simple.

Pon tu iframe en un div con una clase llamada "mapas" por ejemplo.

Este será el CSS para su iframe

.maps iframe { pointer-events: none }

Y aquí hay un pequeño javascript que establecerá la propiedad de eventos de puntero del iframe en "auto" cuando coloque 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 "none" nuevamente 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");
});

Salud.

iXzellent
fuente

3

He creado un complemento 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>

Expandir fragmento

Emiliano Díaz
fuente

2

Utilizando la respuesta de @nathanielperales, agregué la función de desplazamiento porque para mí funciona mejor cuando el usuario pierde el foco en el mapa para dejar de desplazarse nuevamente :)

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

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

Maciek Kwapinski
fuente

Lo que pasa es que perdemos la función de navegación, para mí es muy importante en los dispositivos móviles. He creado un complemento jQuery muy simple que puede modificar si lo desea. Compruébelo en github.com/diazemiliano/mapScrollOff

Emiliano Díaz

2

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

Hover listener está adjunto al elemento padre, por lo que si el padre actual es más grande, simplemente puede envolver el iframe con un div antes de la tercera línea.

Espero que sea útil para alguien.

bencergazda
fuente

1

Me topé con este problema yo mismo y usé algunas de una combinación de dos respuestas muy útiles sobre esta pregunta: la respuesta de czerasz y massa .

Ambos tienen mucha verdad, pero en algún lugar de mis pruebas, descubrí que uno no funcionaba para dispositivos móviles y tenía un soporte de IE deficiente (solo funciona en IE11). Esta es la solución de nathanielperales, luego extendida por czerasz, que se basa en css-pointer-events y que no funciona en dispositivos móviles (no hay ningún puntero en dispositivos móviles) y no funciona en 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 elegí la solución de superposición, usando un contenedor para facilitar la codificación.

Entonces, mi marcado 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 esencia de GitHub , si te gusta obtener cosas de allí ...

EffectiX
fuente

1

Esta es una solución con CSS y Javascript (es decir, Jquery pero también funciona con Javascript puro). Al mismo tiempo, el mapa responde. Evite el mapa para hacer zoom al desplazarse, 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 !

Vaquero
fuente

1

En Google Maps v3 ahora puede desactivar el desplazamiento para hacer zoom, lo que conduce a una experiencia de usuario mucho mejor. Otras funciones del mapa seguirán funcionando y no necesita divs adicionales. También pensé que debería haber algunos comentarios para el usuario para que puedan ver cuando el desplazamiento está habilitado, así que agregué un borde de 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')
  });
};

Gerry
fuente

1

Esto le dará un mapa de Google receptivo que detendrá el desplazamiento en el iframe, pero una vez que haga clic en él, le permitirá hacer zoom.

Copie y pegue esto en su html pero reemplace el enlace del iframe con el suyo. Es un artículo con un ejemplo: deshabilite el zoom de la rueda de desplazamiento del mouse en los iframes incrustados 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>

Jonny Jordan
fuente

0

Este serí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 debe llamarse 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 pasarle el atributo falso 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 del sensor por alguna razón. Asegúrese de incluir el archivo mapi.js antes de su archivo main.js.

Chad Warren
fuente

0

Para google maps v2 - GMap2:

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

usuario956584
fuente

0

si tiene un iframe que usa la API incrustada de Google Map 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: 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>

Frank Dark
fuente

0

Aquí está mi opinión sobre la respuesta @nathanielperales extendida por @chams, ahora extendida nuevamente 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'));
});

Squarecandy
fuente

0

El más simple :

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

T.Todua
fuente

0

Agregue esto a su 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
});
}

Akriti
fuente

2

La pregunta se refiere a la API de inserción (usando un iframe), no a la API de JavaScript.

GreatBlakes

0

Aquí está mi solución para el problema, estaba creando un sitio WP, por lo que hay un pequeño código php aquí. Pero la clave está scrollwheel: false,en el objeto del 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. Salud

Djordje Arsenovic
fuente

Deshabilite el zoom de la rueda de desplazamiento del mouse en Google Maps incorporado

Respuestas: