Imaginemos que tenemos un mapa y queremos que se genere un marcador en cada lugar en el que hacemos click para marcar una ruta, una serie de puntos de interés, etc.
Veamos cómo generar marcadores y como controlarlos.
Lo primero, montar un evento click ‘en el mapa’ que nos recoja la lat,lng del lugar donde hemos clicado.
|
1 2 3 4 5 6 |
var contador =0; google.maps.event.addListener(map, 'click', function(resultado) { console.log("click "+contador+" en lat:"+resultado.latLng.lat()+" , lng:"+resultado.latLng.lng()); contador++; }); |
En la consola vemos:
Podemos crear una función que nos genere un marcador con los parámetros lat,lng que le pasemos y un número para identificar el marcador.
|
1 2 3 4 5 6 7 8 9 10 11 |
function genera_marcador(lat,lng,numero) { var cadena="soy el marcador nº "; cadena+=numero; new google.maps.Marker({ position: new google.maps.LatLng(lat,lng), map: map, title: cadena, animation: google.maps.Animation.DROP }); } |
Fijaos que no guardamos el identificador del marcador, los generamos y punto.
Vamos a mejorarlo un poco creando un array y guardando los marcadores que vayamos creando en él.
Simplemente definimos el array, y una vez generado el marcador lo metemos dentro.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var array_marcadores = new Array(); function genera_marcador(lat,lng,numero) { var cadena="soy el marcador nº "; cadena+=numero; var marcador = new google.maps.Marker({ position: new google.maps.LatLng(lat,lng), map: map, title: cadena, animation: google.maps.Animation.DROP }); array_marcadores.push(marcador); } |
Se genera un marcador y lo apilamos en el array.
¿Y para qué queremos un array con los valores de los marcadores? Pues para tenerlos bien controlados (ya lo veremos) como: borrar marcadores, moverlos y actualizar su posición, guardar una ruta, etc.
Para comprobar los valores que tenemos en nuestro array podemos poner un evento en el mapa que, al ejecutarse, nos muestre los valores que contiene.
Vamos a poner el evento en un ‘clic derecho’ del ratón sobre nuestro mapa.
|
1 2 3 4 5 6 7 |
google.maps.event.addListener(map, 'rightclick', function() { for(var a=0;a<array_marcadores.length;a++) { console.log("[pos array "+a+"] lat: "+array_marcadores[a].position.lat()+", lon:"+array_marcadores[a].position.lng()); } }); |
El mismo ejemplo con un bucle For/In
|
1 2 3 4 |
for(a in array_marcadores) { console.log("[pos array "+a+"] lat: "+array_marcadores[a].position.lat()+", lon :"+array_marcadores[a].position.lng()); } |
Como todos sabemos en este mundo hay mil y una maneras de hacer las cosas, cada uno con la que mejor le vaya.
Si hay algo que no quede suficientemente claro o tenéis otra manera de hacerlo… ¡comentad! 😉
Sé el primero en comentar