Mover marcadores, eventos de marcadores y la consola.
Al crear nuestro marcador podemos añadirle dentro de las opciones la opción draggable: true. Eso nos permite poder arrastrar y mover nuestro marcador, así de fácil :p
¿Pero donde lo movemos? ¿Cuando sabemos que lo hemos cogido y cuando lo soltamos?
Los eventos del marcador.
Tenemos el identificador de nuestro luciente marcador guardado en la variable marcador. A éste se le pueden aplicar 3 eventos de dragg para controlar si lo movemos. Son los siguientes:
- Dragstart: cuando se coge el marcador para moverlo.
- Drag: mientras se mueve.
- Dragend: al soltar el marcador.
A parte tenemos los eventos típicos :
- click
- dblclick
- mouseup
- mousedown
- mouseover
- mouseout
Lo que tenemos que hacer es decirle a google maps, después de crear nuestro marcador, qué tiene que hacer ( función a ejecutar ) el evento cuando se produzca.
1 2 3 4 |
google.maps.event.addListener(marcador, 'dragstart', function() { alert('mueveme con cariño!'); }); |
El que nos suele interesar es la posición donde lo soltamos :
1 2 3 4 5 |
google.maps.event.addListener(marcador, 'dragend', function() { var pos = marcador.getPosition(); alert('soltado en LAT:'+pos.lat()+' LON:'+pos.lng()); }); |
O bien:
1 2 3 4 |
google.maps.event.addListener(marcador, 'dragend', function() { alert('soltado en LAT:'+marcador.getPosition().lat()+' LON:'+marcador.getPosition().lng()); }); |
Fijaos ahora en la precisión que devuelve google maps para una coordenada. Ahora ya sabéis truncarla.
Antes de seguir os recomiendo que utilicéis el firebug para analizar y poder usar la consola de JavaScript para informarnos, porque el uso de alert() es un poco latero.
** Firebug o el que más os guste.
El ejemplo anterior con salida por consola en vez de los alerts.
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 |
<script type="text/javascript"> window.onload = function(){ var options = { zoom: 13, center: new google.maps.LatLng(41.973174, 2.818134), mapTypeId: google.maps.MapTypeId.SATELLITE, panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false, draggable: false }; var map = new google.maps.Map(document.getElementById('map'), options); 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 }); google.maps.event.addListener(marcador, 'dragstart', function() { console.log('mueveme con cariño'); }); google.maps.event.addListener(marcador, 'dragend', function() { var pos = marcador.getPosition(); console.log('soltado en LAT:'+pos.lat()+' LON:'+pos.lng()); }); }; </script> |
Otro ejemplo, esta vez con un evento clic. Crearemos un segundo marcador desplazado respecto al primero, y al hacer clic sobre él se cambiará el zoom y se centrará el mapa en ese marcador.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var marcador2 = new google.maps.Marker({ position: new google.maps.LatLng(41.983174, 2.828134), map: map, title: "2ndo marcador Click para zoom", animation: google.maps.Animation.DROP, draggable: false }); google.maps.event.addListener(marcador2, 'click', function() { map.setZoom(15); map.setCenter(marcador2.getPosition()); }); |
Sé el primero en comentar