Google maps básico IV (eventos en el mapa)

Publicado por Quanticbyte en 24 octubre, 2014
Categorias : GoogleMaps

Ya hemos visto los eventos en los marcadores, pero el mapa también puede tener eventos.

Events Arguments Description
bounds_changed None Este evento se activa cuando los límites del viewport han cambiado.
center_changed None Este evento se activa cuando el centro del mapa cambia.
click MouseEvent Este evento se activa cuando el usuario hace clic en el mapa (pero no al hacer clic en un marcador o ventana de información).
dblclick MouseEvent Este evento se activa cuando el usuario hace doble clic en el mapa. Tenga en cuenta que el evento clic también se disparará, justo antes que éste.
drag None Este evento se activa repetidamente mientras el usuario arrastra el mapa.
dragend None Este evento se activa cuando el usuario deja de arrastrar el mapa.
dragstart None Este evento se activa cuando el usuario empieza a arrastrar el mapa.
heading_changed None Este evento se activa cuando se canvian propiedades del mapa.
idle None Este evento se activa cuando el mapa se vuelve inactivo después de desplazar el mapa o zoom.
maptypeid_changed None Este evento se activa cuando cambia la propiedad mapTypeId.
mousemove MouseEvent Este evento se activa cuando el ratón del usuario se mueve sobre el contenedor mapa.
mouseout MouseEvent Este evento se activa cuando el ratón del usuario sale del contenedor mapa.
mouseover MouseEvent Este evento se activa cuando el ratón del usuario entra en el recipiente mapa.
projection_changed None Este evento se activa cuando la proyección ha cambiado.
resize None Los desarrolladores deben desencadenar este evento en el mapa cuando el DIV cambia de tamaño:
google.maps.event.trigger(map, ‘resize’)
rightclick MouseEvent Este evento se activa cuando el evento contextual DOM se dispara dentro del mapa (clic derecho).
tilesloaded None Este evento se activa cuando los cuadros que componen el mapa han terminado de cargar.
tilt_changed None Este evento se activa al hacer cambios de inclinación en el mapa.
zoom_changed None Este evento se activa cuando hay cambios en el zoom del mapa.

Os dejo el enlace a la web de google.

Bueno, ya veis el montón de eventos que tiene el mapa, pero lo importante es darles utilidad, y aquí es donde entra vuestra imaginación.
Un ejemplo:
Un mapa,con un marcador
Al ponernos encima del mapa con el cursor
– Nos centra el marcador en el mapa
– Nos hace zoom sobre el marcador
Al salir con el cursor de encima del mapa
– Recupera el centro que tenía
– Y el zoom que tenía
Vamos allá:

El código está bastante claro, fijaos que hemos definido la variable pos_original para poder recuperarla cuando se produzca el evento ‘mouseout’.
Y hemos puesto los eventos ‘mouseover’ con las modificaciones en el mapa y ‘mouseout’ dejando el mapa como lo teníamos.

Eventos mapa
Vamos con otro ejemplo, un mapa elástico, al desplazar el mapa y soltar, recupera su centro.

Entrada corta pero importante, recomiendo que juguéis un poco con los eventos y los probéis.

Ya como de costumbre, si tenéis dudas o si habéis hecho algo diferente y queréis compartirlo, comentad 😉

Sé el primero en comentar


Deja un comentario






Acepto la política de privacidad