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

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

EL 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.

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

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.

¡Mantenlo simple! Variable de mapas de Google original, 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 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').

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>

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

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

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>

Solo necesita agregar opciones de mapa:

scrollwheel: false

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

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

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

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,