Artículos
Google

Borrar marcas de un mapa de Google Maps

14/Oct/2012

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.

Suscribir
Notificar de
guest
3 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios