Cómo deshabilitar el escalado de la rueda de desplazamiento del mouse con la API de Google Maps

Estoy usando la API de Google Maps (v3) para dibujar algunos mapas en una página. Una cosa que me gustaría hacer es deshabilitar el zoom cuando desplaza la rueda del mouse sobre el mapa, pero no estoy seguro de cómo.

He desactivado scaleControl (es decir, eliminé el elemento de la interfaz de usuario de escala), pero esto no evita la escala de la rueda de desplazamiento.

Aquí está parte de mi función (es un simple complemento de jQuery):

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};

preguntado el 24 de febrero de 10 a las 19:02

Hola, creé un complemento más desarrollado que te permite bloquear o desbloquear el mapa con un bonito botón. También es el complemento jQuery. Puedes comprobarlo en github.com/diazemiliano/googlemaps-scrollprevent Espero que te guste. -

14 Respuestas

En la versión 3 de la API de Maps, simplemente puede configurar scrollwheel opción a falso dentro de la MapOptions propiedades:

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

Si estuviera utilizando la versión 2 de la API de Google Maps, habría tenido que utilizar la disableScrollWheelZoom () Llamada a la API de la siguiente manera:

map.disableScrollWheelZoom();

La scrollwheel el zoom está habilitado de forma predeterminada en la versión 3 de la API de Maps, pero en la versión 2 está deshabilitado a menos que se habilite explícitamente con el enableScrollWheelZoom() Llamada API.

Respondido 09 Oct 14, 18:10

+1 para tu información: disableDefaultUI: true puede sustituir navigationControl: false, mapTypeControl: false, scaleControl: false - Jordan Arseno

Un problema para mí fue que si no tienes el mapTypeId, los otros parámetros se ignoran. - michael cazador

Esto funciona para mí, pero tiene el extraño efecto secundario de deshabilitar la rueda de desplazamiento dentro de un modal en la página. No hay mapa en el contenido modal y el cursor no está sobre el mapa. - micro regular

Lamentablemente, esto no funciona como se esperaba con StreetViewPanorama Map, ya que al poner scrollwheel: false, deshabilita el zoom de desplazamiento, pero también deshabilita el desplazamiento de la página ya que todavía está capturando el desplazamiento de alguna manera. - Salomón Closson

Daniel, ¿podrías ayudarme a responder esta pregunta? stackoverflow.com/questions/60544486/… - Xavier Isaac

El código de Daniel hace el trabajo (¡muchas gracias!). Pero quería desactivar el zoom por completo. Descubrí que tenía que usar las cuatro opciones para hacerlo:

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

Ver: Especificación del objeto MapOptions

contestado el 23 de mayo de 17 a las 11:05

¿Esto todavía funciona para ti? No pude obtener la versión actual de v3 (creo que es 3.9) para ignorar la rueda de desplazamiento, y tuve que recurrir a recorrer todos los elementos secundarios del objeto del mapa y detener la propagación en el mapa. - c. apolzon

¡Sí, funciona para mí, gracias! Además, si desea eliminar todos los widgets de control de mapa predeterminados, simplemente desactiveDefaultUI: true en lugar de desactivar los controles de zoom, rotación y panorámica individualmente. - tomax

Tenga cuidado con las mayúsculas; scrollwheel debe ser todo en minúsculas (solo me pilló subiendo la W) - veces

rueda de desplazamiento: falso era todo lo que necesitaba - mindore

En caso de que desee hacer esto de forma dinámica;

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

A veces tienes que mostrar algo "complejo" sobre el mapa (o el mapa es una pequeña parte del diseño), y este zoom de desplazamiento se coloca en el medio, pero una vez que tienes un mapa limpio, esta forma de hacer zoom es agradable.

Respondido el 14 de diciembre de 16 a las 17:12

Puede agregar este código en la inicialización: map.addListener ('click', function () {if (map) map.setOptions ({scrollwheel: true});}); map.addListener ('mouseout', function () {if (map) map.setOptions ({scrollwheel: false});}); - Astronauta

Esto funciona para mí, ya que quería interrogar la función de rueda de desplazamiento del mapa fuera del código de Google Maps. es decir, desde el interior de mi propio código jquery. - harby

¡Mantenlo simple! Variable de mapas de Google original, ninguna de las cosas adicionales.

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}

respondido 02 mar '15, 20:03

A partir de ahora (octubre de 2017) Google ha implementado una propiedad específica para manejar el zoom / desplazamiento, llamada gestureHandling. Su propósito es manejar el funcionamiento de los dispositivos móviles, pero también modifica el comportamiento de los navegadores de escritorio. Aquí es de documentación oficial:

function initMap() {
  var locationRio = {lat: -22.915, lng: -43.197};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: locationRio,
    gestureHandling: 'none'
});

Los valores disponibles para gestoHandling son:

  • 'greedy': El mapa siempre se desplaza (hacia arriba o hacia abajo, hacia la izquierda o hacia la derecha) cuando el usuario desliza (arrastra) la pantalla. En otras palabras, tanto un deslizamiento de un dedo como un deslizamiento de dos dedos hacen que el mapa se desplace.
  • 'cooperative': El usuario debe deslizar un dedo para desplazarse por la página y dos dedos para desplazarse por el mapa. Si el usuario desliza el mapa con un dedo, aparece una superposición en el mapa, con un mensaje que le indica que use dos dedos para mover el mapa. En las aplicaciones de escritorio, los usuarios pueden hacer zoom o desplazarse por el mapa desplazándose mientras presionan una tecla modificadora (la tecla ctrl o ⌘).
  • 'none': Esta opción deshabilita el desplazamiento y el pellizco en el mapa para dispositivos móviles y el arrastre del mapa en dispositivos de escritorio.
  • 'auto' (predeterminado): Dependiendo de si se puede desplazar la página, la API de JavaScript de Google Maps establece la propiedad gestHandling en 'cooperative' or 'greedy'

En resumen, puede forzar fácilmente la configuración a "siempre ampliable" ('greedy'), "nunca ampliable" ('none'), o "el usuario debe presionar CRTL / ⌘ para habilitar el zoom" ('cooperative').

Respondido 10 Oct 17, 16:10

Creé un complemento jQuery más desarrollado que te permite bloquear o desbloquear el mapa con un bonito botón.

Este complemento deshabilita el iframe de Google Maps con un div superpuesto transparente y agrega un botón para desbloquearlo. Debe presionar durante 650 milisegundos para desbloquearlo.

Puede cambiar todas las opciones para su conveniencia. Compruébalo en https://github.com/diazemiliano/googlemaps-scrollprevent

He aquí un ejemplo.

(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);
.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>

Respondido 21 Feb 17, 16:02

Buen complemento, pero ¿cómo usarlo cuando crea el mapa de Google con la API de JS en lugar de usar un iframe? - ikkez

Es "Edit in JSFiddle Result JavaScript HTML CSS"¿realmente forma parte del código? - Pedro Mortensen

En mi caso, lo crucial fue establecer 'scrollwheel':false en init. Aviso: estoy usando jQuery UI Map. Abajo esta mi CoffeeScript encabezado de la función init:

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->

Respondido el 14 de diciembre de 16 a las 17:12

Por si acaso, está utilizando el GMaps.js biblioteca, que hace que sea un poco más simple hacer cosas como codificación geográfica y pines personalizados, así es como resuelve este problema utilizando las técnicas aprendidas de las respuestas anteriores.

var Gmap = new GMaps({
  div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
  lat: 51.044308,
  lng: -114.0630914,
  zoom: 15
});

// To access the Native Google Maps object use the .map property
if(Gmap.map) {
  // Disabling mouse wheel scroll zooming
  Gmap.map.setOptions({ scrollwheel: false });
}

Respondido el 14 de diciembre de 16 a las 17:12

Para alguien que se pregunta cómo deshabilitar el API Javascript Google Map

Va a habilitar el desplazamiento de zoom si hace clic en el mapa una vez. Y inhabilitar después de que su mouse salga del div.

Aquí hay un ejemplo

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element , {
    zoom: 17,
    scrollwheel: false,
    center: {
      lat: parseFloat(-33.915916),
      lng: parseFloat(151.147159)
    },
  });
}


//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>

contestado el 10 de mayo de 17 a las 06:05

Solo necesita agregar opciones de mapa:

scrollwheel: false

Respondido el 29 de junio de 17 a las 19:06

Una solución sencilla:

// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
  $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
  $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
.scrolloff{ pointer-events: none; }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>

Fuente: https://github.com/Corsidia/scrolloff

Respondido el 08 de junio de 17 a las 19:06

En caso de que alguien esté interesado en una solución CSS pura para esto. El siguiente código superpone un div transparente sobre el mapa y mueve el div transparente detrás del mapa cuando se hace clic en él. La superposición evita el zoom, una vez que se hace clic, y detrás del mapa, el zoom está habilitado.

Ver la publicación de mi blog Mapas de Google alternar zoom con css para una explicación de cómo funciona, y bolígrafo codepen.io/daveybrown/pen/yVryMr para una demostración funcional.

Descargo de responsabilidad: esto es principalmente para aprender y probablemente no sea la mejor solución para sitios web de producción.

HTML:

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

CSS:

.map-wrap {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin-bottom: 10px;
}

#map-input {
    opacity: 0;
}

.map-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 2;    
}

#map-input[type=checkbox]:checked ~ iframe {
    z-index: 3;
}

#map-input[type=checkbox]:checked ~ .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}

Respondido 01 Feb 17, 21:02

Use ese fragmento de código, que le dará todo el control de color y zoom del mapa de Google. (scaleControl: falso y rueda de desplazamiento: falso evitará que la rueda del mouse suba o baje)

function initMap() {
            // Styles a map in night mode.
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 23.684994, lng: 90.356331},
                zoom: 8,
                scaleControl: false,
                scrollwheel: false,
              styles: [
                {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
                {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
                {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
                {
                  featureType: 'administrative.locality',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'geometry',
                  stylers: [{color: '#263c3f'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry.stroke',
                  stylers: [{color: '#212a37'}]
                },
                {
                  featureType: 'road',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry',
                  stylers: [{color: '#746855'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry.stroke',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'labels.text.fill',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'transit',
                  elementType: 'geometry',
                  stylers: [{color: '#2f3948'}]
                },
                {
                  featureType: 'transit.station',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b3'}]
                },
                {
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#0676b6'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#515c6d'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.stroke',
                  stylers: [{color: '#17263c'}]
                }
              ]
            });
    
             var marker = new google.maps.Marker({
              position: {lat: 23.684994, lng: 90.356331},
              map: map,
              title: 'BANGLADESH'
            });
          }

Respondido el 18 de junio de 17 a las 13:06

Si bien este código puede responder a la pregunta, proporcionar un contexto adicional sobre cómo y / o por qué resuelve el problema mejoraría el valor de la respuesta a largo plazo. Por favor lee esto cómo responder por brindar una respuesta de calidad. - tal como fuimos

Lo hago con este simple ejemplo

jQuery

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

CO

.map {
    width: 100%; 
}
.map iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
    pointer-events: auto;
}

O usa las opciones de gmap

function init() { 
    var mapOptions = {  
        scrollwheel: false, 

Respondido el 22 de junio de 17 a las 14:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.