A veces, es molesto usar la rueda del ratón para hacer scroll en una página y descubrir que lo que está ocurriendo es que estás haciendo zoom en un mapa de Google Maps, o arrastrar la página hacia arriba en el movil y que solamente se mueva el mapa. Existe una solución para evitar esto, y consiste en dejar el mapa inactivo (como si solamente fuese una imagen) hasta que hagas click encima para activarlo.
Tenemos dos formas de poner un mapa de Google en una web, la primera es la más simple, y consiste en ir a la página de Google Maps, buscar la localización que queremos, pulsar la rueda dentada de opciones (abajo derecha), seleccionar «compartir o insertar el mapa» y después la pestaña «insertar mapa«. Ahí obtenemos un código (un IFRAME) que podemos pegar donde queramos en nuestra web. La segunda manera es usando la librería Javascript de Google Maps, generando un objeto de tipo mapa y dándole las opciones deseadas.
El segundo método es más complejo, aunque nos da más control y posibilidades para hacer cosas. De hecho, ya existe una opción que nos permite directamente desactivar la rueda del ratón: {scrollwheel: false}. Así que no le dedicaré más atención a esto.
El primer método es el que nos puede producir más molestias, ya que no podemos manipular el código que nos han dado. Pero vamos a ver qué se puede hacer.
Lo primero será meter el código del mapa (el IFRAME), dentro de una capa DIV a la que le pondremos un identificador, por ejemplo #mapa. Nos quedará algo así:
<div id="mapa">
<iframe src="..." width="600" height="450"></iframe>
</div>
La solución consiste en poner una capa más, que cubra todo el mapa y que sirva de «protección anti-eventos». Esta capa debe tener el mismo tamaño exactamente que el mapa y debe estar delante. Necesitamos meter dicha capa y algunos estilos en el CSS.
<div id="mapa">
<div class="capa-anti-eventos" onclick="style.display='none'"></div>
<iframe src="..." width="600" height="450"></iframe>
</div>
<style>
#mapa .capa-anti-eventos {
width: 600px;
height: 450px;
position: absolute;
cursor: pointer;
}
</style>
Aquí hay un ejemplo en vivo. Le he añadido un background transparente a la «capa-anti-eventos» para que se vea bien el funcionamiento:
https://jsfiddle.net/2uxtL5d0/
