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




scroll enable (13)

Estoy utilizando 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 se desplaza 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 IU de escala), pero esto no impide 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
};

Answers

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


Por si acaso, está utilizando la biblioteca GMaps.js , que hace que sea un poco más sencillo hacer cosas como geocodificación y pines personalizados. A continuación se explica cómo resolver 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 });
}

El código de Daniel hace el trabajo (¡muchas 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


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 la publicación de mi blog. Google maps alterna zoom con css para obtener una explicación de cómo funciona, y pen codepen.io/daveybrown/pen/yVryMr para una demostración de trabajo.

Descargo de responsabilidad: esto es principalmente para el aprendizaje 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;
}

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

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

}

En mi caso, lo crucial fue poner en 'scrollwheel':false en init. Aviso: Estoy usando jQuery UI Map . A continuación se muestra el encabezado de mi función CoffeeScript init:

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

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

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

Por si acaso quieres hacer esto dinámicamente;

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 interpone en el medio, pero una vez que tienes un mapa limpio, esta forma de zoom es agradable.


Solo necesitas añadir opciones de mapa:

scrollwheel: false

En la versión 3 de la API de Google Maps, simplemente puede configurar la opción de scrollwheel 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 usando la versión 2 de la API de Google Maps, habría tenido que usar la llamada a la API disableScrollWheelZoom() siguiente manera:

map.disableScrollWheelZoom();

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


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 la operación de los 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 gestuales 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 mueva.
  • 'cooperative' : el usuario debe deslizar con 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 presiona 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 la página es desplazable, la API de JavaScript de Google Maps establece que la propiedad Gestar gestos sea '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' ).


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

Se habilitará el desplazamiento de zoom si hace clic en el mapa una vez. Y deshabilita después de que tu ratón 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>


Respuesta aceptada, reescrita en ES6:

$(document).ready(() => {
  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

  // Display a map on the page
  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

  const buildings = [
    {
      title: 'London Eye, London', 
      coordinates: [51.503454, -0.119562],
      info: 'carousel'
    },
    {
      title: 'Palace of Westminster, London', 
      coordinates: [51.499633, -0.124755],
      info: 'palace'
    }
  ];

  placeBuildingsOnMap(buildings, map);
});


const placeBuildingsOnMap = (buildings, map) => {
  // Loop through our array of buildings & place each one on the map  
  const bounds = new google.maps.LatLngBounds();
  buildings.forEach((building) => {
    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
    // Stretch our bounds to the newly found marker position
    bounds.extend(position);

    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: building.title
    });

    const infoWindow = new google.maps.InfoWindow();
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.setContent(building.info);
      infoWindow.open(map, marker);
    })

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  })
})






jquery google-maps google-maps-api-3 jquery-plugins