En el último post vimos cómo crear nuestro array de marcadores, vamos a ver en este como podemos borrar un marcador de nuestro array y del mapa.
Antes de seguir, una aclaración sobre como eliminar elementos de un array. Esta manera (¡que no la única!) es con la función que nos brinda Javascript, splice().
nombreArray.splice(índice a borrar, número de elementos a borrar);
ejemplo:
var array = [1,2,3,4,5];
array.splice(2,1);
array contiene [1,3,4,5];
array.splice(2,2);
array contiene [1,5];
Y para eliminar un marcador en el mapa lo único que tenemos que hacer es poner ese marcador a null.
Marcador.setMap(null);
Si solo se tiene que eliminar del mapa, ¡bien!, pero, ¿y si también queremos eliminarlo de nuestro array? Veamos un ejemplo con código:
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 |
var array_marcadores = new Array(); function gernera_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, identificador: numero }); //apilamos marcador array_marcadores.push(marcador); //añadimos evento click en el marcador google.maps.event.addListener(marcador, 'click', function() { for(var a=0;a<array_marcadores.length;a++) { if(array_marcadores[a][ 'identificador'] == this.identificador) { array_marcadores[a].setMap(null); //borramos el marcador del mapa array_marcadores.splice(a, 1) //borramos el marcador de nuestro array } } }); } |
Primero de todo, fijaos que dentro de la definición del marcador hemos incluido un campo nuevo, ‘identificador’, para poder tener identificado el marcador.
Sí, lo podríamos identificar con el nombre solo, sin poner campo, cogiendo el string del nombre y eliminando la parte de «soy el marcador nº» y convirtiendo el resultado en un int; o mirando la Lat,Lng del marcador, comprobando el nombre directamente, etc.
Creo que así queda más claro.
Después de crear el marcador y apilarlo en nuestro array, añadimos el evento ‘click’ al marcador creado (el que tenemos en la variable marcador).
Si el marcador recibe un clic, recorremos el array de marcadores buscando el marcador que tenga el mismo identificador que el marcador que ha generado el clic (leñe que lio :p)
Cuando lo encontramos, lo borramos del mapa y lo eliminamos del array.
Ahora ya podemos crear marcadores con un ‘click’ sobre el mapa y borrarlos haciendo ‘click’ sobre ellos.
Para comprobar el array, para ver cómo se suman o se quitan elementos, cuando se produzca el evento ‘rightclick’ en el mapa recorremos el array mostrando la posición, el identificador, lat y lon del marcador que contiene.
1 2 3 4 5 6 7 8 9 10 |
google.maps.event.addListener(map, 'rightclick', function() { console.log('----------------------------------'); for(var a=0;a<array_marcadores.length;a++) { console.log( "posición array : "+a+", identificador :"+ array_marcadores[a]['identificador']+", lat:"+array_marcadores[a].position.lat()+", lon :"+array_marcadores[a].position.lng() ); } }); |
Aquí vemos como creamos 5 marcadores, mostramos el array, eliminamos el 1 y el 3 y volvemos a mostrar el array.
Si lo que queremos es limpiar de golpe todo el mapa, solo tenemos que recorrer el array poniendo todos los marcadores a null, y eliminar el contenido del array.
Veamos como colocar un botón debajo el div del mapa para eliminar todos los marcadores.
Primero creamos nuestro bonito y reluciente botón.
1 2 3 4 |
<body> <div id="map"></div> <button type="button" id="botonBorrar">Elimina marcadores</button> </body> |
Luego creamos la función que nos borre los marcadores del mapa, poniendo los que tengamos en el array a null, y eliminando el contenido del array.
1 2 3 4 5 6 7 8 9 |
function eliminaMarcadores() { console.log('Borrando todos los marcadores'); for(a in array_marcadores) { array_marcadores[a].setMap(null); } array_marcadores = []; } |
Y por último “anclamos” esta función al evento click del botón.
1 |
document.getElementById('botonBorrar').addEventListener('click',eliminaMarcadores,false); |
Solo una cosita más por hoy, a los marcadores de nuestro mapa les podemos agregar la opción ‘draggable: true’, así podremos reubicar los marcadores una vez colocados en el mapa.
Como en el array tenemos el objeto del marcador, si lo movemos, él mismo actualiza su posición.
Podemos comprobar cómo se actualizan las posiciones con la salida por consola.
Creamos dos marcadores, mostramos su ubicación, los movemos y volvemos a mostrar su ubicación, vemos como han cambiado su lat y lon.
1 2 3 4 5 6 7 8 |
var marcador = new google.maps.Marker({ position: new google.maps.LatLng(lat,lng), draggable:true, map: map, title: cadena, animation: google.maps.Animation.DROP, identificador: numero }); |