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.
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
});
}
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. 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(){...});
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(){
// Recorrempos 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.
