jquery - enable - Cómo deshabilitar la escala de la rueda de desplazamiento del mouse con la API de Google Maps
zoom google maps (14)
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
};
¡Mantenlo simple! Variable original de Google Maps, ninguna de las cosas extra.
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, 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'' ).
Creé un complemento de jQuery más desarrollado que te permite bloquear o desbloquear el mapa con un bonito botón.
Este complemento desactiva el iframe de Google Maps con un div de superposición transparente y agrega un botón para desbloquear. Debes presionar durante 650 milisegundos para desbloquearlo.
Puede cambiar todas las opciones para su conveniencia. Compruébelo en 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 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;
}
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() .
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,
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>
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.
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 });
}
Solo necesitas añadir 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>
Use ese fragmento de código, que le dará todo el control de color y zoom de google map. ( scaleControl: false y scrollwheel: false evitará que la rueda del mouse se desplace 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''
});
}
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,
...
}