Deshabilite Ctrl + Scroll to Zoom google maps

95

¿Alguien sabe cómo desactivar el CTRL+ Scroll?

Primero, cuando se movió la rueda del mouse, el mapa se acercaría / alejaría. Pero ahora pide presionar CTRL+ Rueda del mouse Desplazarse para acercar / alejar.

¿Cómo desactivamos esta función? Parece que no puedo encontrar nada en la documentación:

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

javascript google-maps

— Dawood Awan
fuente

este enlace puede ayudarlo a stackoverflow.com/questions/21992498/…

— Brajesh Kanungo

@BrajeshKanungo que no está relacionado con la función anterior, esta es una nueva función introducida por Google Maps, quiero desactivarla.

— Dawood Awan

Ok, ¿puedes decirme qué versión de API estás usando?

— Brajesh Kanungo

la última versión - maps.googleapis.com/maps/api/js?v=3.exp

— Dawood Awan

Esto también acaba de aparecer en nuestro sitio, por lo que probablemente una actualización de la API de Google

— Tom

153

Debe pasar gestureHandling: 'greedy'a las opciones de su mapa.

Documentación: https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

Por ejemplo:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  gestureHandling: 'greedy'
});

¡Actualizar! Desde Google Maps 3.35.6, necesita encajar la propiedad en un contenedor de opciones:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  options: {
    gestureHandling: 'greedy'
  }
});

Gracias ealfonsopor la nueva información

— kano
fuente

@DiegoAndrade No tengo conocimiento de los detalles. tal vez no se implementó en ese entonces. Pero está presente en las versiones 3.29(congelado), 3.30(lanzamiento) y posteriores ( 3.exp, experimental).

— kano

Sí @Kano, en estos documentos esta función todavía está presente, pero en mis pruebas aquí no funciona. Realmente no sé por qué eliminaron esto :(

— Diego Andrade

1

Sé que está presente. Ese es el punto. Comenzando con 3.30No está funcionando. Probé todas estas versiones. De todos modos, ya está funcionando con 3.26.

— Diego Andrade

3

finalmente la respuesta correcta. Me tomó mucho tiempo buscar esto en Google. No entiendo por qué Google no hizo que esto sea el predeterminado.

— comienza el

2

Bingo, esta es la solución perfecta.

— N Khan

17

Si está de acuerdo con deshabilitar el desplazamiento para hacer zoom por completo, puede usar scrollwheel: false. El usuario aún podrá hacer zoom en el mapa haciendo clic en los botones de zoom si les proporciona el control de zoom ( zoomControl: true).

Documentación: https://developers.google.com/maps/documentation/javascript/reference (busque en la página "scrollwheel")

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  scrollwheel: false,
  zoomControl: true
});

— Brendan Benson
fuente

7

Si solo está buscando ocultar la superposición pero aún deshabilita la capacidad de desplazarse y hacer zoom (como antes), puede usar CSS para ocultar la superposición:

.gm-style-pbc {
opacity: 0 !important;
}

Tenga en cuenta que esto también lo ocultará para dispositivos móviles, por lo que podría usar algo como esto para asegurarse de que muestre "use dos dedos para mover el mapa":

@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}

— Chumtarou
fuente

Gracias. Me sorprende que más gente no quiera esto. Es un mensaje superpuesto que distrae mucho y que prácticamente destruye la experiencia del mapa para mí.

— BaseZen

5

Anidar el gestureHandlingdentro de una optionspropiedad funcionó para mí en la versión "3.35.6".

map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        options:{
            gestureHandling: 'greedy'
        }
    });

— ealfonso
fuente

4

No pude hacer que la gestureHandling: 'greedy'solución funcionara para mí ya que tenía una superposición sobre el mapa. Terminé detectando el mousewheelevento y estableciendo la ctrlpropiedad en verdadero.

// Load maps and attach event listener to scroll event.
var $map = $('.map');
$map[0].addEventListener('wheel', wheelEvent, true);         

function wheelEvent(event) {
    // Set the ctrlKey property to true to avoid having to press ctrl to zoom in/out.
    Object.defineProperty(event, 'ctrlKey', { value: true });
}

— MisterMisterio
fuente