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


560

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

He desactivado el control de escala (es decir, he eliminado el elemento de la interfaz de usuario de escala), pero esto no impide la escala de la rueda de desplazamiento.

Aquí es parte de mi función (es un simple complemento 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
};

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

Presentado en Developers Writing the Future por Joel Spolsky (CEO y cofundador de Stack Overflow) , de 17 min. 09 seg. - 18 min. 25 seg. (2016-12-07).
Peter Mortensen

Respuestas:


986

En la versión 3 de la API de Maps, simplemente puede establecer la scrollwheelopción en falso dentro de las propiedades de MapOptions :

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 utilizar la llamada a la API disableScrollWheelZoom () de la siguiente manera:

map.disableScrollWheelZoom();

El scrollwheelzoom 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 la enableScrollWheelZoom()llamada a la API.


40
+1 FYI: disableDefaultUI: truepuede reemplazarnavigationControl: false, mapTypeControl: false, scaleControl: false
Jordan Arseno

1
Un problema para mí fue que si no tienes el mapTypeId, los demás parámetros se ignoran.
Michael Hunter

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 un mapa en el contenido modal y el cursor no está sobre el mapa.
regularmike

Lamentablemente, esto no funciona como se esperaba con StreetViewPanorama Map, ya que al colocar la rueda de desplazamiento: falso, deshabilita el zoom de desplazamiento, pero también deshabilita el desplazamiento de la página, ya que todavía atrapa el desplazamiento de alguna manera.
Solomon Closson

Daniel, ¿puedes ayudarme a responder esta pregunta? Stackoverflow.com/questions/60544486/…
Xavier Issac

103

El código de Daniel hace el trabajo (¡gracias!). Pero quería deshabilitar 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


2
¿Esto todavía funciona para ti? No he podido 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 deshabilite DefaultUI: true en lugar de desactivar el zoom, rotar y desplazar los controles individualmente.
thomax

33
Cuidado con la capitalización; scrollwheeldebe ser todo en minúsculas (me sorprendió al mostrar la W)
kez

1
scrollwheel: falso era todo lo que necesitaba
mindore

30

En caso de que quiera hacer esto dinámicamente;

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

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

A veces tiene 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 tiene un mapa limpio, esta forma de zoom es agradable.


3
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 desplazamiento del mapa fuera del código de Google Maps. es decir, desde mi propio código jquery.
lharby

26

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

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

}

10

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 la operación de dispositivos móviles, pero también modifica el comportamiento de los navegadores de escritorio. Aquí está de la 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 gestos de manejo son:

  • 'greedy': El mapa siempre se desplaza (arriba o abajo, izquierda o derecha) cuando el usuario desliza (arrastra) la pantalla. En otras palabras, tanto el deslizamiento con un dedo como el deslizamiento con 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 desplazar 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 hacer zoom o desplazarse por 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'(por defecto): Dependiendo de si la página es desplazable, la API JavaScript de Google Maps establece la propiedad gestureHandling a cualquiera 'cooperative'o'greedy'

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


7

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

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

Puede cambiar todas las opciones para su conveniencia. Compruébelo 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>


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

2
¿Es " Edit in JSFiddle Result JavaScript HTML CSS" realmente parte del código?
Peter Mortensen

6

En mi caso, lo crucial fue establecerlo 'scrollwheel':falseen init. Aviso: estoy usando jQuery UI Map. A continuación se muestra el título de mi función de inicio de CoffeeScript :

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

6

Por si acaso, está utilizando la biblioteca GMaps.js , lo que hace que sea un poco más simple hacer cosas como geocodificación 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 });
}

4

Para alguien que se pregunta cómo deshabilitar la API de JavaScript de Google Map

Se permitirá el desplazamiento de zoom si hace clic en el mapa una vez. Y deshabilite 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>



3

Una solución simple:

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


2

Solo 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. La superposición evita el zoom, una vez que se hace clic, y detrás del mapa, el zoom está habilitado.

Vea mi publicación de blog Google Maps alterna zoom con css para obtener una explicación de cómo funciona, y escriba pen codepen.io/daveybrown/pen/yVryMr para una demostración en funcionamiento.

Descargo de responsabilidad: esto es principalmente para el aprendizaje y probablemente no será la mejor solución para los 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;
}

0

Use ese código, que le dará todo el control de color y zoom del mapa de Google. ( ScaleControl: falsa y scrollwheel: falsa evitará que la rueda del ratón a partir zoom hacia arriba o hacia abajo)

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


Si bien este código puede responder la pregunta, proporcionar un contexto adicional con respecto a cómo y / o por qué resuelve el problema mejoraría el valor a largo plazo de la respuesta. Lea este tutorial para obtener una respuesta de calidad.
thewaywew era

0

Lo hago con estos simples ejemplos.

jQuery

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

CSS

.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 use las opciones de gmap

function init() { 
    var mapOptions = {  
        scrollwheel: false, 
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.