Deshabilitar el zoom de la rueda de desplazamiento del mouse en Google Maps integrado

198

holiveira 2014-02-25 05:54.

Estoy trabajando en un sitio de WordPress donde los autores suelen incrustar Google Maps utilizando iFrames en la mayoría de las publicaciones.

¿Hay alguna manera de desactivar el zoom mediante la rueda de desplazamiento del mouse en todos ellos usando Javascript?

google-maps scrollwheel

30 answers

255

Massa 2014-03-22 09:22.

Estaba teniendo el mismo problema: al desplazarme por la página, el puntero pasa a estar sobre el mapa, comienza a acercar / alejar el mapa en lugar de continuar desplazándose por la página. :(

Así que resolví esto poniendo un divcon un .overlayexactamente antes de cada iframeinserción de gmap , ver:

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

En mi CSS creé la clase:

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

El div cubrirá el mapa, evitando que los eventos de puntero lleguen a él. Pero si hace clic en el div, se vuelve transparente para los eventos de puntero, ¡activando el mapa nuevamente!

Espero que te ayuden :)

136

nathanielperales 2014-08-31 17:40.

Probé la primera respuesta en esta discusión y no me funcionó sin importar lo que hice, así que se me ocurrió mi propia solución:

Envuelva el iframe con una clase (.maps en este ejemplo) e idealmente incruste el código en respuesta: http://embedresponsively.com/ - Cambie el CSS del iframe pointer-events: noney luego, usando la función de clic de jQuery en el elemento principal, puede cambiar el iframes css apointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Estoy seguro de que hay una única forma de JavaScript de hacer esto, si alguien quiere agregar algo a esto, siéntase libre.

La forma de JavaScript para reactivar los eventos de puntero es bastante simple. Simplemente dé una identificación al iFrame (es decir, "iframe"), luego aplique un evento onclick al div cointainer:

onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

czerasz 2014-09-18 19:12.

Extendí la solución @nathanielperales.

Debajo de la descripción del comportamiento:

haga clic en el mapa para habilitar el desplazamiento
cuando el mouse sale del mapa, deshabilita el desplazamiento

Debajo del código javascript:

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

Y aquí hay un ejemplo de jsFiddle .

cHaMs 2015-04-23 22:28.

Estoy reeditando el código escrito por #nathanielperales, realmente funcionó para mí. Simple y fácil de atrapar, pero solo funciona una vez. Así que agregué mouseleave () en JavaScript. Idea adaptada de #Bogdan Y ahora es perfecta. Prueba esto. Los créditos van para #nathanielperales y #Bogdan. Simplemente combiné ambas ideas. Gracias chicos. Espero que esto ayude a otros también ...

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Improvisa adáptate supérate

Y aquí hay un ejemplo de jsFiddle.

Hassam Raja 2014-05-21 15:45.

Sí, es bastante fácil. Me enfrenté a un problema similar. Simplemente agregue la propiedad css "pointer-events" al div iframe y configúrelo en 'none' .

Ejemplo: <iframe style = "pointer-events: none" src = ........>

Nota al margen: esta corrección deshabilitaría todos los demás eventos del mouse en el mapa. Me funcionó, ya que no requirimos ninguna interacción del usuario en el mapa.

borchvm 2014-06-06 02:07.

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

Grzegorz 2014-02-26 01:23.

Después de investigar un poco, tienes 2 opciones. Dado que la nueva API de mapas con iframe embed no parece admitir la desactivación de la rueda del mouse.

Primero estaría usando mapas antiguos de Google ( https://support.google.com/maps/answer/3045828?hl=es ).

En segundo lugar , sería crear una función de JavaScript para simplificar la incrustación de un mapa para cada comentario y el uso de parámetros (es un código de muestra solo para señalar la ubicación, no mostrar la solución exacta)

function createMap(containerid, parameters) {
  var mymap = document.getElementById(containerid),
  map_options = {
    zoom: 13,
    scrollwheel: false,
    /* rest of options */
  },
  map = new google.maps.Map(mymap, map_options);

  /* 'rest of code' to take parameters into account */
}

Bogdan 2014-10-03 23:12.

Existe una solución increíble y sencilla.

Debe agregar una clase personalizada en su css que establezca los eventos de puntero para asignar el lienzo a ninguno:

.scrolloff{
   pointer-events: none;
}

Luego, con jQuery, puede agregar y eliminar esa clase en función de diferentes eventos, por ejemplo:

    $( document ).ready(function() {

    // you want to enable the pointer events only on click;

        $('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas').on('click', function() {
            $('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click
        });

    // you want to disable pointer events when the mouse leave the canvas area;

     $( "#map_canvas" ).mouseleave(function() {
          $('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
     });    
});

He creado un ejemplo en jsfiddle , ¡espero que ayude!

RSiqueira 2016-04-15 13:34.

Solo registro una cuenta en developers.google.com y obtengo un token para llamar a una API de Maps, y simplemente lo deshabilito de esta manera (scrollwheel: false):

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('container_google_maps'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8,
            scrollwheel: false
        });
    }

user1588572 2016-12-06 08:06.

Este es mi enfoque. Lo encuentro fácil de implementar en varios sitios web y lo uso todo el tiempo.

CSS y JavaScript:

<style type="text/css">
.scrolloff iframe   {
    pointer-events: none ;
}
</style>

<script type="text/javascript">
function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click

}

function scrollOff() {
    $('#map').addClass('scrolloff'); 

}
</script>

En el HTML, querrá envolver el iframe en un div. <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >

function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click
   
}

function scrollOff() {
    $('#map').addClass('scrolloff'); // set the pointer events true on click
    
}

.scrolloff iframe   {
        pointer-events: none ;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

Espero que esto ayude a cualquiera que busque una solución simple.

manish_s 2015-07-07 04:01.

He aquí una solución sencilla. Simplemente configure el pointer-events: noneCSS <iframe>para deshabilitar el desplazamiento del mouse.

<div id="gmap-holder">
    <iframe width="100%" height="400" frameborder="0" style="border:0; pointer-events:none"
            src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe>
</div>

Si desea que el desplazamiento del mouse se active cuando el usuario haga clic en el mapa, utilice el siguiente código JS. También deshabilitará el desplazamiento del mouse nuevamente, cuando el mouse se mueva fuera del mapa.

$(function() {
    $('#gmap-holder').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
})

NadirShah Rahat 2015-09-14 13:01.

Para deshabilitar el zoom de la rueda de desplazamiento del mouse en Google Maps incrustado, solo necesita establecer la propiedad css pointer-events del iframe en none:

<style>
#googlemap iframe {
    pointer-events:none;
}
</style>

Eso es todo ... Bastante bien ¿eh?

<div id="googlemap">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3648.6714814904954!2d90.40069809681577!3d23.865796688563787!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c425897f1f09%3A0x2bdfa71343f07395!2sArcadia+Green+Point%2C+Rd+No.+16%2C+Dhaka+1230%2C+Bangladesh!5e0!3m2!1sen!2sin!4v1442184916780" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Qatan 2016-03-29 23:30.

Bueno, para mí la mejor solución fue simplemente usar así:

HTML:

<div id="google-maps">
<iframe frameborder="0" height="450" src="***embed-map***"  width="100"</iframe>
</div>

CSS:

#google-maps iframe { pointer-events:none; }

JS:

<script>
  $(function() {
    $('#google-maps').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'auto');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
  })
</script>

RESULTADO

Consideraciones:

Lo mejor sería agregar una superposición con una transparencia más oscura con un texto: " Haga clic para navegar " cuando la rueda del mouse está desactivada Pero cuando se activa (después de hacer clic en ella), la transparencia con el texto desaparecería y el usuario podría navegar el mapa como se esperaba. ¿Alguna pista de cómo hacer eso?

Mohan 2015-01-10 04:13.

Agregue estilo a pointer-events:none;este trabajo bien

<iframe style="pointer-events:none;" src=""></iframe>

Andrei 2015-08-07 03:05.

La forma más sencilla de hacerlo es utilizando un pseudo-elemento como :beforeo :after.
Este método no requerirá ningún elemento html adicional o jquery.
Si tenemos, por ejemplo, esta estructura html:

<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Entonces todo lo que tenemos que hacer es hacer que el contenedor sea relativo al pseudo-elemento que crearemos para evitar el desplazamiento

.map_wraper{
    position:relative;
}

Luego de esto crearemos el pseudo-elemento que será posicionado sobre el mapa para evitar el desplazamiento:

.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

¡Y listo, sin jquery, sin elementos html adicionales! Aquí hay un ejemplo de jsfiddle funcional: http://jsfiddle.net/e6j4Lbe1/

iXzellent 2016-02-16 05:49.

Aquí está mi sencilla solución.

Pon tu iframe en un div con una clase llamada "mapas", por ejemplo.

Este será el CSS para su iframe

.maps iframe { pointer-events: none }

Y aquí hay un pequeño javascript que establecerá la propiedad pointer-events del iframe en "auto" cuando coloque el elemento div durante al menos 1 segundo (funciona mejor para mí, configúrelo como desee) y borra el tiempo de espera / configúrelo en "ninguno" nuevamente cuando el mouse abandone el elemento.

var maptimer;

$(".maps").hover(function(){
    maptimer = setTimeout(function(){
        $(".maps").find("iframe").css("pointer-events", "auto");
    },1000);
},function(){
    clearTimeout(maptimer);
    $(".maps").find("iframe").css("pointer-events", "none");
});

Salud.

Emiliano Díaz 2015-02-04 05:59.

He creado un complemento jQuery muy simple para resolver el problema. Compruébalo en https://diazemiliano.github.io/googlemaps-scrollprevent

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

Edit in JSFiddle Result JavaScript HTML CSS .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>

Maciek Kwapinski 2014-12-12 02:27.

Usando la respuesta de @nathanielperales, agregué la función de desplazamiento porque para mí funciona mejor cuando el usuario pierde el enfoque en el mapa para dejar de desplazarse nuevamente :)

$(function(){
    $('.mapa').hover(function(){
        stopScroll();},
                     function () {
    $('.mapa iframe').css("pointer-events", "none");
    });
});

function stopScroll(){
$('.mapa').click(function () {
    $('.mapa iframe').css("pointer-events", "auto");
});
}

bencergazda 2015-05-29 23:04.

Variaciones sobre un tema: una solución simple con jQuery, no se necesita edición de CSS.

// make iframe active on click, disable on mouseleave
$('iframe.google_map').each( function(i, iframe) {
    $(iframe).parent().hover( // make inactive on hover
        function() { $(iframe).css('pointer-events', 'none');
    }).click( // activate on click
        function() { $(iframe).css('pointer-events', 'auto');
    }).trigger('mouseover'); // make it inactive by default as well
});

El oyente de desplazamiento está adjunto al elemento principal, por lo que si el elemento principal actual es más grande, simplemente puede envolver el iframe con un div antes de la tercera línea.

Espero que sea de utilidad para alguien.

EffectiX 2014-11-26 05:09.

Yo mismo me topé con este problema y utilicé una combinación de dos respuestas muy útiles a esta pregunta: la respuesta de czerasz y la respuesta de massa .

Ambos tienen mucha verdad, pero en algún lugar de mis pruebas, descubrí que uno no funcionaba para dispositivos móviles y tenía un soporte de IE deficiente (solo funciona en IE11). Esta es la solución de nathanielperales, luego extendida por czerasz, que se basa en pointer-events css y que no funciona en dispositivos móviles (no hay punteros en dispositivos móviles) y no funciona en ninguna versión de IE que no sea v11. . Normalmente no me importaría menos, pero hay un montón de usuarios y queremos una funcionalidad consistente, así que opté por la solución de superposición, usando un contenedor para facilitar la codificación.

Entonces, mi marcado se ve así:

<div class="map embed-container">
  <div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
  <div class="map-overlay" style="display: block;"></div>
  <iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe>
</div>

Entonces los estilos son así:

.map.embed-container {
  position:relative;
}

.map.embed-container #map-notice{
  position:absolute;
  right:0;
  top:0;
  background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/
  background-color: rgba(0,0,0,.50);
  color: #ccc;
  padding: 8px;
}
.map.embed-container .map-overlay{
  height:100%;
  width:100%;
  position:absolute;
  z-index:9999;
  background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/
}

Por último, el guión:

//using jquery...
var onMapMouseleaveHandler = function (event) {
  $('#map-notice').fadeIn(500);
  var elemento = $$(this);
  elemento.on('click', onMapClickHandler);
  elemento.off('mouseleave', onMapMouseleaveHandler);
  $('.map-overlay').fadeIn(500);
}

var onMapClickHandler = function (event) {
  $('#map-notice').fadeOut(500);
  var elemento = $$(this);
  elemento.off('click', onMapClickHandler);
  $('.map-overlay').fadeOut(500);
  elemento.on('mouseleave', onMapMouseleaveHandler);
}
$('.map.embed-container').on('click', onMapClickHandler);

También agregué mi solución probada en una esencia de GitHub , si desea obtener cosas de allí ...

Jean 2015-09-09 02:45.

Esta es una solución con CSS y Javascript (es decir, Jquery pero también funciona con Javascript puro). Al mismo tiempo, el mapa responde. Evite hacer zoom en el mapa cuando se desplaza, pero el mapa se puede activar haciendo clic en él.

HTML / JQuery Javascript

<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;"> 
    <iframe id="googlemap" src="http://your-embed-url" height="350"></iframe>
</div>

CSS

#map {
    position: relative; 
    padding-bottom: 36%; /* 16:9 ratio for responsive */ 
    height: 0; 
    overflow: hidden; 
    background:transparent; /* does the trick */
    z-index:98; /* does the trick */
}
#map iframe { 
    pointer-events:none; /* does the trick */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    z-index:97; /* does the trick */
}

Que te diviertas !

Gerry 2016-03-24 18:05.

En Google Maps v3 ahora puede deshabilitar el desplazamiento para hacer zoom, lo que conduce a una experiencia de usuario mucho mejor. Otras funciones de mapa seguirán funcionando y no necesitará divs adicionales. También pensé que debería haber algunos comentarios para el usuario para que puedan ver cuándo está habilitado el desplazamiento, así que agregué un borde de mapa.

// map is the google maps object, '#map' is the jquery selector
preventAccidentalZoom(map, '#map'); 

// Disables and enables scroll to zoom as appropriate. Also
// gives the user a UI cue as to when scrolling is enabled.
function preventAccidentalZoom(map, mapSelector){
  var mapElement = $(mapSelector);

  // Disable the scroll wheel by default
  map.setOptions({ scrollwheel: false })

  // Enable scroll to zoom when there is a mouse down on the map.
  // This allows for a click and drag to also enable the map
  mapElement.on('mousedown', function () {
    map.setOptions({ scrollwheel: true });
    mapElement.css('border', '1px solid blue')
  });

  // Disable scroll to zoom when the mouse leaves the map.
  mapElement.mouseleave(function () {
    map.setOptions({ scrollwheel: false })
    mapElement.css('border', 'none')
  });
};

Jonny Jordan 2016-10-21 12:07.

Esto le dará un mapa de Google receptivo que detendrá el desplazamiento en el iframe, pero una vez que haga clic en él, le permitirá hacer zoom.

Copie y pegue esto en su html pero reemplace el enlace iframe con el suyo. Es un artículo al respecto con un ejemplo: deshabilite el zoom de la rueda de desplazamiento del mouse en los iframes integrados de Google Map

<style>
    .overlay {
    background:transparent;
    position:relative;
    width:100%; /* your iframe width */
    height:480px; /* your iframe height */
    top:480px; /* your iframe height */
    margin-top:-480px; /* your iframe height */
    }
</style>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="100%" height="480"></iframe>

Chad Warren 2014-07-04 06:38.

Este sería mi enfoque para esto.

Pon esto en mi main.js o archivo similar:

// Create an array of styles.
var styles = [
                {
                    stylers: [
                        { saturation: -300 }

                    ]
                },{
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                        { hue: "#16a085" },
                        { visibility: 'simplified' }
                    ]
                },{
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: [
                        { visibility: 'off' }
                    ]
                }
              ],

                // Lagitute and longitude for your location goes here
               lat = -7.79722,
               lng = 110.36880,

              // Create a new StyledMapType object, passing it the array of styles,
              // as well as the name to be displayed on the map type control.
              customMap = new google.maps.StyledMapType(styles,
                  {name: 'Styled Map'}),

            // Create a map object, and include the MapTypeId to add
            // to the map type control.
              mapOptions = {
                  zoom: 12,
                scrollwheel: false,
                  center: new google.maps.LatLng( lat, lng ),
                  mapTypeControlOptions: {
                      mapTypeIds: [google.maps.MapTypeId.ROADMAP],

                  }
              },
              map = new google.maps.Map(document.getElementById('map'), mapOptions),
              myLatlng = new google.maps.LatLng( lat, lng ),

              marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: "images/marker.png"
              });

              //Associate the styled map with the MapTypeId and set it to display.
              map.mapTypes.set('map_style', customMap);
              map.setMapTypeId('map_style');

Luego, simplemente inserte un div vacío donde desea que aparezca el mapa en su página.

<div id="map"></div>

Obviamente, también deberá llamar a la API de Google Maps. Simplemente creé un archivo llamado mapi.js y lo arrojé a mi carpeta / js. Este archivo debe llamarse antes del javascript anterior.

`window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected]"],[["http://khm0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["http://mt0.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected]"],[["http://mt0.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected],[email protected]"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0","3.14.0"],[2635921922],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0/main.js");
})();`

Cuando llame al archivo mapi.js asegúrese de pasarle el atributo falso del sensor.

es decir: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>

La nueva versión 3 de la API requiere la inclusión de sensor por alguna razón. Asegúrese de incluir el archivo mapi.js antes de su archivo main.js.

user956584 2014-07-12 02:17.

Para google maps v2 - GMap2:

ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();

Frank Dark 2015-03-28 07:30.

si tiene un iframe utilizando la API incrustada de mapas de Google como esta:

 <iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

puede agregar este estilo css: pointer-event: none; ES.

<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

squarecandy 2016-03-31 15:11.

Aquí está mi opinión sobre la respuesta de @nathanielperales extendida por @chams, ahora extendida nuevamente por mí.

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

jQuery

// we're doing so much with jQuery already, might as well set the initial state
$('.maps iframe').css("pointer-events", "none");

// as a safety, allow pointer events on click
$('.maps').click(function() {
  $(this).find('iframe').css("pointer-events", "auto");
});


$('.maps').mouseleave(function() {
  // set the default again on mouse out - disallow pointer events
  $(this).find('iframe').css("pointer-events", "none");
  // unset the comparison data so it doesn't effect things when you enter again
  $(this).removeData('oldmousepos');
});

$('.maps').bind('mousemove', function(e){
  $this = $(this);
  // check the current mouse X position
  $this.data('mousepos', e.pageX);
  // set the comparison data if it's null or undefined
  if ($this.data('oldmousepos') == null) {
    $this.data('oldmousepos', $this.data('mousepos'));
  }
  setTimeout(function(){
    // some left/right movement - allow pointer events
    if ($this.data('oldmousepos') != $this.data('mousepos')) {
      $this.find('iframe').css("pointer-events", "auto");
    }
    // set the compairison variable
    $this.data('oldmousepos', $this.data('mousepos'));
  }, 300);
  console.log($this.data('oldmousepos')+ ' ' + $this.data('mousepos'));
});

T.Todua 2016-10-25 08:58.

El mas simple :

<div id="myIframe" style="width:640px; height:480px;">
   <div style="background:transparent; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer;" onClick="style.pointerEvents='none'"></div>
   <iframe src="https://www.google.com/maps/d/embed?mid=XXXXXXXXXXXXXX" style="width:640px; height:480px;"></iframe>
</div>

Akriti 2017-05-23 21:00.

Agregue esto a su secuencia de comandos:

function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: uluru,
        scrollwheel: false,
        disableDefaultUI: true,
        disableDoubleClickZoom: true
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
});
}

Djordje Arsenovic 2017-08-01 04:18.

Aquí está mi solución para el problema, estaba construyendo un sitio WP, así que aquí hay un pequeño código php. Pero la clave está scrollwheel: false,en el objeto del mapa.

function initMap() {
        var uluru = {lat: <?php echo $latitude; ?>, lng: <?php echo $Longitude; ?>};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            scrollwheel: false,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }

Espero que esto ayude. Salud

Japanese Spanish German French Thai Portuguese Russian Vietnamese Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que le diagnosticaron envenenamiento por mercurio y plomo, probablemente debido a su trabajo como manipuladora de casas.

2022-12-22.

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Recientemente salió a la luz un informe policial que acusa a la estrella de 'Love Is Blind', Brennon, de violencia doméstica. Ahora, Brennon ha respondido a los reclamos.

2022-12-14.

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Conozca cómo Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia mientras organizaba la primera celebración de Acción de Gracias desde que murió su madre, Naomi Judd.

2022-12-09.

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Descubra por qué un destacado experto en lenguaje corporal cree que es fácil trazar "tales paralelismos" entre la princesa Kate Middleton y la princesa Diana.

2022-12-07.

Estados Unidos podría evitarse el horror del nuevo gran horneado británico

Si este tráiler de pesadilla de la temporada más reciente de Great British Bake Off te asustó y te hizo no volver a ver el programa, es posible que tengas suerte: PBS no ha decidido si se transmitirá o no la última temporada en los Estados Unidos. actualización, para aquellos que no siguen sin aliento este tipo de drama de nicho: el presentador Paul Hollywood y la hermosa carpa llena de batidoras de colores pastel y cuadros se trasladaron de la BBC al Canal 4; Mary Berry, Sue Perkins y Mel Giedroyc renunciaron.

2023-03-30 05:05.

Atún como Oh, Hello llega a Netflix

Foto: Netflix Oh, Hello On Broadway (Netflix): Después de llegar a Broadway el año pasado, los dos locos del Upper West Side interpretados por John Mulaney y Nick Kroll finalmente llegaron a Netflix. El especial consta del espectáculo en el escenario, algunos momentos entre bastidores y un invitado muy especial de “Too Much Tuna”.

2023-03-30 05:01.

Actualice a un Sonicare por tan solo $ 30

¿Quiere probar un cepillo de dientes Sonicare sin gastar mucho dinero en uno de sus modelos favoritos de gama alta? Puede comprar un kit de la Serie 2 o Serie 3 por tan solo $ 30 hoy en Amazon. Haga clic aquí para ver la lista completa de modelos elegibles y tenga en cuenta que se descontarán $ 10 adicionales en su carrito.

2023-03-29 11:42.

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Tapas elásticas de silicona de Tomorrow's Kitchen, paquete de 12 | $14 | Amazonas | Código promocional 20OFFKINJALids son básicamente los calcetines de la cocina; siempre perdiéndose, dejando contenedores huérfanos que nunca podrán volver a cerrarse. Pero, ¿y si sus tapas pudieran estirarse y adaptarse a todos los recipientes, ollas, sartenes e incluso frutas en rodajas grandes que sobran? Nunca más tendrás que preocuparte por perder esa tapa tan específica.

2022-11-02 18:37.

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

El equipo está a la espera de las medallas que ganó en los Juegos Olímpicos de Invierno de 2022 en Beijing, ya que se está resolviendo un caso de dopaje que involucra a la patinadora artística rusa Kamila Valieva.

2023-02-03.

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Miles de compradores de Amazon recomiendan la funda de almohada de seda Mulberry, y está a la venta en este momento. La funda de almohada de seda viene en varios colores y ayuda a mantener el cabello suave y la piel clara. Compre las fundas de almohada de seda mientras tienen hasta un 46 por ciento de descuento en Amazon

2023-02-03.

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

El Departamento de Policía de Lafayette comenzó a investigar a un profesor de la Universidad de Purdue en diciembre después de recibir varias denuncias de un "hombre sospechoso que se acercaba a una mujer".

2023-02-03.

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Al igual que el mundo que nos rodea, el lenguaje siempre está cambiando. Mientras que en eras anteriores los cambios en el idioma ocurrían durante años o incluso décadas, ahora pueden ocurrir en cuestión de días o incluso horas.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

Deshabilitar el zoom de la rueda de desplazamiento del mouse en Google Maps integrado

30 answers

Related questions

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

The Secrets of Airline Travel Quiz

Where in the World Are You? Take our GeoGuesser Quiz

¿Caduca el repelente de insectos?

Estados Unidos podría evitarse el horror del nuevo gran horneado británico

Atún como Oh, Hello llega a Netflix

Actualice a un Sonicare por tan solo $ 30

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

Concept Drift: el mundo está cambiando demasiado rápido para la IA

India me está pateando el culo

ℝ

¿Merrick Garland le ha fallado a Estados Unidos?

Es más de la mitad de la presidencia de Biden. ¿Qué está esperando Merrick Garland?

Language