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á:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
window.onload = function(){ var pos_original = new google.maps.LatLng(41.983174, 2.828134); //definimos mapa var options = { zoom: 13, center: pos_original, mapTypeId: google.maps.MapTypeId.SATELLITE, panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false }; //creamos mapa var map = new google.maps.Map(document.getElementById('map'), options); //marcador sobre el mapa var marcador = new google.maps.Marker({ position: new google.maps.LatLng(41.973174, 2.818134), map: map, title: "Nuestro primer marcador", animation: google.maps.Animation.DROP, draggable: true }); //evento sobre map ‘mouseover’ ( al entrar en el mapa ) google.maps.event.addListener(map, 'mouseover', function() { map.setCenter(marcador.getPosition()); map.setZoom(16); }); //evento sobre map ‘mouseout’ ( al salir mapa ) google.maps.event.addListener(map, 'mouseout', function() { map.setCenter(pos_original); map.setZoom(13); }); }; |
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.
Vamos con otro ejemplo, un mapa elástico, al desplazar el mapa y soltar, recupera su centro.
1 2 3 4 5 |
google.maps.event.addListener(map, 'dragend', function() { map.setCenter(pos_original); map.setZoom(13); }); |
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