Pregunta Cómo deshabilitar la escala de la rueda de desplazamiento del mouse con la API de Google Maps


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

Desactivé el control de escala (es decir, eliminé el elemento UI de escala), pero esto no impide la escala de la rueda de desplazamiento.

Aquí hay una parte de mi función (es un plugin de jQuery simple):

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

538
2018-02-24 22:39


origen


Respuestas:


En la versión 3 de la API de Maps, simplemente puede configurar el scrollwheel opción a falso dentro del 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 Maps, habría tenido que usar disableScrollWheelZoom () Llamada API de la siguiente manera:

map.disableScrollWheelZoom();

los scrollwheel el zoom está habilitado por defecto en la versión 3 de la API de Maps, pero en la versión 2 está deshabilitado a menos que esté habilitado explícitamente con la enableScrollWheelZoom() Llamada API


963
2018-02-24 22:50



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


100
2018-06-27 23:18



En caso de que quieras 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 desplazamiento de desplazamiento se coloca en el medio, pero una vez que tienes un mapa limpio, esta forma de acercar es agradable.


29
2017-09-18 18:52



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

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

}

26
2017-10-21 14:17



En mi caso, lo crucial era establecer 'scrollwheel':false en init. Aviso: estoy usando jQuery UI Map. A continuación está mi CoffeeScript encabezado de la función init:

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

6
2017-07-14 14:52



Por las dudas, estás usando el GMaps.js biblioteca, lo que hace que sea un poco más simple hacer cosas como Geocodificación y pines personalizados, así es como se 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 });
}

6
2017-10-20 17:48



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

Este complemento desactiva el iframe de Google Maps con un div transparente de superposición y agrega un botón para desbloquearlo. Debes presionar durante 650 milisegundos para desbloquearlo.

Puede cambiar todas las opciones para su conveniencia. Verifíquelo en https://github.com/diazemiliano/googlemaps-scrollprevent

Aquí hay 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>


6
2017-08-01 22:42



A partir de ahora (octubre de 2017) Google ha implementado una propiedad específica para manejar el zoom / desplazamiento, llamado 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 gestureHandling 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 con un solo dedo como deslizar dos dedos hacen que el mapa se mueva.
  • 'cooperative': El usuario debe deslizar con 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 al usuario que use dos dedos para mover el mapa. En las aplicaciones de escritorio, los usuarios pueden acercar o alejar el mapa desplazándose mientras presionan una tecla modificadora (la tecla ctrl o ⌘).
  • 'none': Esta opción deshabilita la panorámica y el pellizco en el mapa para dispositivos móviles y el arrastre del mapa en dispositivos de escritorio.
  • 'auto' (predeterminado): según si la página es desplazable, la API de JavaScript de Google Maps establece la propiedad gestureHandling en 'cooperative' o 'greedy'

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


5
2017-10-10 15:24



Para alguien que se pregunta cómo desactivar el API de 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 de la 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>


4
2018-05-10 05:40



Solo necesita agregar opciones de mapa:

scrollwheel: false

4
2018-06-29 13:54