Cómo deshabilitar la escala 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 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
};

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.

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

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.

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

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

}

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').

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>

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

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

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>

Solo necesita agregar opciones de mapa:

scrollwheel: false

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

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

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

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,