Borrar marcas de un mapa de Google Maps

14/Oct/2012 Google , , , , , , , , 3 Comentarios

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().

  1. function addMark(location){
  2. marker = new google.maps.Marker({
  3. position: location,
  4. map: map
  5. });
  6. }

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:

  1. var puntos = [];

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

  1. function addMark(location){
  2. marker = new google.maps.Marker({
  3. position: location,
  4. map: map
  5. });
  6. puntos.push(marker);
  7. }

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.

  1. var b = document.getElementById("borrar");
  2. 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.

  1. var b = document.getElementById("borrar");
  2. b.addEventListener("click",function(){
  3. // Recorrempos el array de puntos y los borramos
  4. for (p in puntos) {
  5. puntos[p].setMap(null);
  6. }
  7. });

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.

3 comentarios en “Borrar marcas de un mapa de Google Maps”

Víctor Cuervo

Diseño web Ecuador

Muchas gracias, lo andaba buscando hace algun tiempo. Lo necesito adjuntar en mi página web en Ecuador

Víctor Cuervo

Hugo

Felicitaciones mi estimado después de buscar un simple ejemplo esto es lo que buscaba.

Saludos Torreon Coah.

Víctor Cuervo

Oscar

Excelentes tus tutoriales para trabajar con google maps.

Quería preguntarte si vas a continuar ya que este que es del 2012 es el más reciente.

Tengo dudas de cómo hacer para que al darle click al marker (que yo coloque), abra una ventana de info y pueda escribir en ella y lo guarde en una base de datos.

Espero que me puedas dar alguna idea.
Saludos!!!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*