creando y borrando marcadores

Google maps básico VI (creando y borrando marcadores)

Publicado por Quanticbyte en 31 octubre, 2014
Categorias : GoogleMaps

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:

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.

nuestro mapa con 5 marcadores

salida por consola

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.

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.

Y por último “anclamos” esta función al evento click del botón.

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.

salida por consola 2

Descarga el ejemplo con dragables:
Descarga

4 comentarios
Avatar de Renzo
Renzo , 6 octubre, 2015

Hola, como sería el código para eliminar solo un marcador??


Avatar de Quanticbyte
Quanticbyte , 21 enero, 2016

Para eliminar un marcador lo pones a null con : Marcador.setMap(null);


Avatar de Dariel
Dariel , 13 septiembre, 2017

Hola sabes alguna forma de trazar la ruta sin usar polylineas cargando los datos del jason solo con los dos puntos GPS??, ademas como eliminarlas del mapa tambien saludos


Avatar de Quanticbyte
Quanticbyte , 14 diciembre, 2017

Buenas, podrias calcular la ruta entre los puntos que tienes … però no serian lineas rectas si no que dependerian del modo de transporte y el recorrido



Deja un comentario






Acepto la política de privacidad