google-maps - gesturehandling - pancontrol google maps
Deshabilitar el zoom de desplazamiento en google maps iframe (4)
Aqui es ejemplo
<script>
function initMap()
{
var map = new google.maps.Map(document.getElementById(''map''),
{center: {lat: -34.397, lng: 150.644},
scrollwheel: false,
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer>
</script>
Fuente: - https://developers.google.com/maps/documentation/javascript/?csw=1#GMap2.Methods
Entonces, aparentemente cuando uso:
<iframe style="pointer-events:none;" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>
la panorámica se desactiva también.
y cuando uso:
<iframe style="scrollwheel: false" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>
simplemente no funciona.
¿Hay alguna manera de simplemente desactivar el zoom de desplazamiento en el iframe?
Es una buena publicación de blog sobre cómo lograrlo con onClick="style.pointerEvents=''none''" Deshabilita el zoom de la rueda de desplazamiento del mouse en los iframes de Google Map integrados
No hay forma de deshabilitar el desplazamiento solo en la API iframe de Google Maps, pero hay una solución alternativa.
Como habrás notado ese style="pointer-events:none;" impide que el iframe reciba cualquier evento del mouse, y con la combinación de controladores de eventos de Javascript en la superposición, puede deshabilitar y habilitar la recepción del evento del mouse en el momento que desee.
Incluso puedes escuchar mousemove() y solo liberar los eventos de puntero cuando el mouse está en ciertas áreas (por ejemplo, botones)
Hice una demostración rápida en github , espero que esta ayuda.
Para alguien que se pregunta cómo deshabilitar la API de Google Map de Javascript
Adoptado de @kaho idea
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>