Borrar marcas de un mapa de Google Maps

En otros artículos hemos visto como podemos crear marcas, como añadir marcas a los mapas de Google Maps, como podemos personalizarlas,… en este caso vamos a ver cómo podemos hacer para eliminarlas de un mapa de Google Maps.

Recordar cómo insertar una marca

Lo primero que vamos a hacer es recordar como insertábamos una marca dentro de un mapa de Google Maps. Para ello nos habíamos creado una función addMark().

function addMark(location){
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
}

Usar un array para almacenar las marcas

Y es que cuando estemos insertando una marca, además de añadirla a Google Maps, lo que vamos a hacer es añadirla en un array. Así que lo primero que hará nuestro programa para borrar marcas del mapa será definir el array:

var puntos = [];

Y ahora, cada vez que insertemos una marca, la insertamos en el array mediante el método .push():

function addMark(location){
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  puntos.push(marker);
}

Así, en nuestro array puntos tenemos todas las marcas.

Añadir un botón para borrar marcas

Ahora añadiremos un botón borrar marcas en nuestra página web y a su evento onclick le vamos a adjuntar el borrado de las marcas.

var b = document.getElementById("borrar");
b.addEventListener("click",function(){...});

Borrar las marcas del mapa

Para realizar el borrado de una marca en concreto lo que hacemos es desasignarla del mapa. Para ello ponemos el valor del mapa asociado a null.

var b = document.getElementById("borrar");
b.addEventListener("click",function(){
  // Recorremos el array de puntos y los borramos
  for (p in puntos) {
    puntos[p].setMap(null);
  }
});

Como vemos en el código, hemos recorrido el array y por cada uno de los objetos Marker hemos ejecutado el método .setMap(null). Así tenemos borrados todos los puntos que hubiésemos añadido al mapa de Google Maps.