Google Maps API v3: ¿Cómo eliminar todos los marcadores?


429

En Google Maps API v2, si quisiera eliminar todos los marcadores del mapa, simplemente podría hacer:

map.clearOverlays();

¿Cómo hago esto en la API de Google Maps v3 ?

Mirando la API de referencia , no me queda claro.


3
Encontré algo de código en el siguiente enlace, pero Holy Cow: es mucho código para simular la línea de código 1 anterior en v2 de la API. lootogo.com/googlemapsapi3/markerPlugin.html
mp_

2
recordar que los mapas 3.0 está destinado a ser muy ligero para que los dispositivos móviles que utilizan también con el intervalo posible ...
Petrogad

1
Las soluciones sugeridas aquí parecen estar rotas a partir del 29/07/2010. Desearía tener una versión funcional para sugerir en su lugar.
Jonathan Hanson el

99
La respuesta mejor calificada es incorrecta. Vea la fuente en este ejemplo para ver cómo hacerlo: google-developers.appspot.com/maps/documentation/javascript/…
Seb Ashton

Respuestas:


487

Simplemente haga lo siguiente:

I. Declarar una variable global:

var markersArray = [];

II Definir una función:

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

O

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. Empuje los marcadores en la 'matriz de marcadores' antes de llamar a lo siguiente:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Llame a la función clearOverlays();o map.clearOverlays();donde sea necesario.

¡¡Eso es!!


32
para..en bucle con una matriz? esto no puede ser bueno seguramente ..? ..ver: stackoverflow.com/questions/500504/…
zack

44
Alternativamente, puede ocultar los marcadores utilizando el marcador.setVisible (falso)
NBK

12
Sin embargo, los marcadores todavía se mantienen en la matriz, por lo que crecerá más y más. Sugeriría borrar la matriz también después del ciclo
Ami

55
siempre se puede establecer markersArrayen una matriz vacía en lugar de establecer su longitud, lo que me parece extraño:markersArray = [];
hellatan

11
Que haría uso de un whilemétodo para el procesamiento de la matriz: while(markersArray.length) { markersArray.pop().setMap(null); }. No es necesario borrar la matriz después de eso.
YingYang

84

El mismo problema. Este código ya no funciona.

Lo he corregido, cambie el método clearMarkers de esta manera:

set_map (null) ---> setMap (null)

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

La documentación se ha actualizado para incluir detalles sobre el tema: https://developers.google.com/maps/documentation/javascript/markers#remove


1
La forma en que finalmente lo hice funcionar fue iterar a través de la colección de marcadores donde los almacené y usar setMap (nulo)
Sebastian

44
Pero, ¿esto borra los marcadores de la memoria? Me doy cuenta de que JavaScript tiene recolección de basura automática, pero ¿cómo sabemos que la API de Google no tiene una referencia al marcador cuando se llama a setMap (nulo)? En mi aplicación, agrego y "borro" una tonelada de marcadores, y odiaría que todos esos marcadores "borrados" estén absorbiendo memoria.
Nick

@Nick: agregue 'delete this.markers [i];' después del bit setMap (nulo).
DaveS

44
Esta pregunta se responde en la documentación ahora. code.google.com/apis/maps/documentation/javascript/…
lashleigh

1
¿Quién incluso usa new Array();?
Rihards

47

Parece que todavía no existe tal función en V3.

Las personas sugieren mantener referencias a todos los marcadores que tiene en el mapa en una matriz. Y luego, cuando desee eliminarlos todos, simplemente recorra la matriz y llame al método .setMap (nulo) en cada una de las referencias.

Vea esta pregunta para más información / código.

Mi version:

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}

El código es una versión editada de este código http://www.lootogo.com/googlemapsapi3/markerPlugin.html Eliminé la necesidad de llamar a addMarker manualmente.

Pros

  • Al hacerlo, mantienes el código compacto y en un solo lugar (no contamina el espacio de nombres).
  • Ya no tiene que hacer un seguimiento de los marcadores, siempre puede encontrar todos los marcadores en el mapa llamando a map.getMarkers ()

Contras

  • El uso de prototipos y envoltorios como lo hice ahora hace que mi código dependa del código de Google; si hacen un cambio importante en su fuente, esto se romperá.
  • Si no lo comprende, no podrá arreglarlo si se rompe. Hay pocas posibilidades de que cambien cualquier cosa que rompa esto, pero aún así ...
  • Si elimina un marcador manualmente, su referencia seguirá estando en la matriz de marcadores. (Puede editar mi método setMap para solucionarlo, pero a costa de recorrer la matriz de marcadores a través y eliminar la referencia)

1
+1 de mi parte. ¡Pero su respuesta sería mejor si incluyera el contenedor para llamar a addMarker automáticamente!
Andrew

Supongo que en realidad te estás refiriendo a la respuesta de Andrews. ¿Mostrarías con código qué harías diferente y por qué? Gracias
mp_

Perdón por el retraso, me estaba retrasando de publicar código porque no tenía forma de probarlo rápidamente.
Maiku Mori

Gracias maiku Sin embargo, no entiendo: ¿cómo agrego un nuevo marcador en su ejemplo? De nuevo, muchas muchas gracias!
mp_

1
Intenté usar setMap (nulo), pero tenía una secuencia de comandos de actualización automática, y cada vez que configuraba mis 50 marcadores en un mapa nulo, todavía tenía un montón de marcadores sin mapa flotando en el DOM en alguna parte. Esto siguió causando que la página se bloqueara porque cada 30 segundos agregaba 50 nuevos marcadores al DOM, y esto se propagaba sin cesar porque la página permanecía abierta las 24 horas, los 7 días de la semana en un muro de video. Tuve que usar la respuesta principal y borrar todas las superposiciones de mapas del DOM por completo antes de crear otras nuevas. Espero que esto ayude a alguien; ¡Me llevó mucho tiempo descubrir por qué mi página se bloqueaba! :(
InterfaceGuy

23

Esta fue la más simple de todas las soluciones publicadas originalmente por YingYang el 11 de marzo de 14 a 15: 049 en la respuesta original a la pregunta original de los usuarios

Estoy usando su misma solución 2.5 años después con google maps v3.18 y funciona de maravilla

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

21
google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

No creo que haya uno en V3, así que utilicé la implementación personalizada anterior.

Descargo de responsabilidad: no escribí este código, pero olvidé conservar una referencia cuando la fusioné en mi base de código, así que no sé de dónde vino.


+1 de mi parte. Agregaría un contenedor alrededor del constructor google.maps.Marker (o método setMap ya que creo que el constructor lo llama internamente) que llama a addMarker automáticamente, pero aún así es una buena respuesta :).
Maiku Mori

@Maiku Mari, ¿mostrarías con código qué harías diferente y por qué? Gracias
mp_

¿Cómo no es esta la solución? Elimina los marcadores utilizando set_map (nulo) en el marcador particular que desea borrar, si desea borrar todo, realice un ciclo utilizando esta función. Si desea algo más, solicítelo aquí: code.google.com/p/gmaps-api-issues/issues/…
Petrogad


66
-1 mal estilo. Solo se crea una matriz de marcadores, pero una por mapa después de clearMarkers (causa de la diferencia de obtener / establecer con los prototipos). Errores desagradables con múltiples objetos de mapa.
Tomás

18

En la nueva versión v3, recomendaron mantener en matrices. como sigue.

Ver muestra en overlay-overview .

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

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

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

6

La Galería de demostración de Google tiene una demostración de cómo lo hacen:

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

Puede ver el código fuente para ver cómo agregan marcadores.

En pocas palabras, mantienen los marcadores en una matriz global. Al borrarlos / eliminarlos, recorren la matriz y llaman ".setMap (null)" en el objeto marcador dado.

Sin embargo, este ejemplo muestra un 'truco'. "Borrar" para este ejemplo significa eliminarlos del mapa pero mantenerlos en la matriz, lo que permite que la aplicación los vuelva a agregar rápidamente al mapa. En cierto sentido, esto actúa como "ocultarlos".

"Eliminar" también borra la matriz.


6
for (i in markersArray) {
  markersArray[i].setMap(null);
}

solo funciona en IE.


for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

trabajando en Chrome, Firefox, es decir ...


1
Lea la ayuda sobre el formato del código en SO
freefaller

6

La solución es bastante fácil. Es posible utilizar el método: marker.setMap(map);. Aquí, usted define en qué mapa aparecerá el pin.

Entonces, si configura nulleste método ( marker.setMap(null);), el pin desaparecerá.


Ahora, puedes escribir una función bruja mientras haces desaparecer todos los marcadores en tu mapa.

Simplemente agregue para colocar sus pines en una matriz y declararlos con markers.push (your_new pin)o este código, por ejemplo:

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

Esta es una función que la bruja puede establecer o desaparecer todos los marcadores de su matriz en el mapa:

// Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

Para desaparecer todos sus marcadores, debe llamar a la función con null:

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

Y, para eliminar y desaparecer todos sus marcadores, debe restablecer su matriz de marcadores de esta manera:

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

Este es mi código completo. Es lo más simple que podría reducir. Tenga cuidado de que pueda reemplazar YOUR_API_KEYen el código por su API de Google clave:

<!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

Puede consultar al desarrollador de Google o la documentación completa en, también, el sitio web del desarrollador de Google .


5

Una aplicación limpia y fácil de la respuesta de Rolinger.

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.push(marker) ;
    }


4

Aquí puede encontrar un ejemplo de cómo eliminar marcadores:

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
   }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}

3

Lo siguiente de Anon funciona perfectamente, aunque con parpadeos cuando se borran repetidamente las superposiciones.

Simplemente haga lo siguiente:

I. Declarar una variable global:

var markersArray = [];

II Definir una función:

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

III. Empuje los marcadores en la 'matriz de marcadores' antes de llamar a lo siguiente:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Llame a la clearOverlays()función donde sea necesario.

¡¡Eso es!!

Espero que te ayude.


1
for(in in markersArray){}probablemente no hace lo que espera que haga. Si Arrayse extiende a cualquier otro lugar del código, también iterará sobre esas propiedades, y no solo los índices. La versión javascript de eso es la markersArray.forEach()que no es compatible en todas partes. Sería mejor confor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
Kit Sunde

3

Encontré el uso de la biblioteca markermanager en el proyecto google-maps-utility-library-v3 como la forma más fácil.

1. Configure el MarkerManager

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2. Agregue marcadores al MarkerManager

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

3. Para borrar marcadores solo necesita llamar a la clearMarkers()función MarkerManger

mgr.clearMarkers();

Parece bastante exagerado sacar esa biblioteca para borrar los marcadores. Todo lo que clearMarkershace es iterar sobre los marcadores que llaman marker.setMap(null)(verifiqué la fuente). Sería menos trabajo ponerlos en una matriz y hacerlo usted mismo.
Kit Sunde

3

También puedes hacerlo de esta manera:

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}

2

Acabo de probar esto con kmlLayer.setMap (nulo) y funcionó. No estoy seguro de si eso funcionaría con marcadores regulares, pero parece funcionar correctamente.


2

Para eliminar todas las superposiciones, incluyendo polys, marcadores, etc.

simplemente use:

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

Aquí hay una función que escribí para que me forme en una aplicación de mapas:

  function clear_Map() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: HamptonRoads
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

¿No esto también restablecería el mapa? ¿y si el usuario hubiera arrastrado el mapa a una nueva área?
Kichu

2

Para eliminar todos los marcadores del mapa, cree funciones como esta:

1.addMarker (ubicación): esta función se usa para agregar marcador en el mapa

2.clearMarkers (): esta función elimina todos los marcadores del mapa, no de la matriz

3.setMapOnAll (mapa): esta función se usa para agregar información de marcadores en la matriz

4.deleteMarkers (): esta función elimina todos los marcadores en la matriz eliminando referencias a ellos.

// Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }


// Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }



// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

// Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

2

La forma más limpia de hacerlo es iterar sobre todas las características del mapa. Los marcadores (junto con polígonos, polilíneas, etc.) se almacenan en la capa de datos del mapa.

function removeAllMarkers() {
  map.data.forEach((feature) => {
    feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
  });
}

En el caso de que los marcadores se agreguen a través del administrador de dibujo , es mejor crear una matriz global de marcadores o empujar los marcadores a la capa de datos en la creación de la siguiente manera:

google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
    var newShape = e.overlay;
    newShape.type = e.type;

    if (newShape.type === 'marker') {
      var pos = newShape.getPosition()
      map.data.add({ geometry: new google.maps.Data.Point(pos) });

      // remove from drawing layer
      newShape.setMap(null);
    }
  });

Recomiendo el segundo enfoque, ya que le permite utilizar otros métodos de clase google.maps.data más adelante.



0

No sé por qué, pero la configuración setMap(null)de mis marcadores no me funcionó cuando la uso DirectionsRenderer.

En mi caso tuve que llamar setMap(null)a mi DirectionsRenderertambién.

Algo como eso:

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

if (map.directionsDisplay) {
    map.directionsDisplay.setMap(null);
}

map.directionsDisplay = directionsDisplay;

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

0

Simplemente camine sobre los marcadores y elimínelos del mapa, matriz de marcadores de mapas vacíos después de eso:

var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
map.markers = [];


0

He intentado todas las soluciones propuestas, pero nada funcionó para mí mientras todos mis marcadores estaban bajo un clúster. Finalmente acabo de poner esto:

var markerCluster = new MarkerClusterer(map, markers,
    { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;

//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();

En otras palabras, si envuelve marcadores en un clúster y desea eliminar todos los marcadores, llame a:

clearMarkers();

-1

¿Te refieres a eliminar como al ocultarlos o eliminarlos?

si se esconde

function clearMarkers() {
            setAllMap(null);
        }

si desea eliminarlos:

 function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

Observe que uso marcadores de matriz para hacer un seguimiento de ellos y restablecerlo manualmente.


-1

Debe establecer un mapa nulo para ese marcador.

var markersList = [];    

function removeMarkers(markersList) {
   for(var i = 0; i < markersList.length; i++) {
      markersList[i].setMap(null);
   }
}

function addMarkers() {
   var marker = new google.maps.Marker({
        position : {
            lat : 12.374,
            lng : -11.55
        },
        map : map
       });
      markersList.push(marker);
   }

-1

Encontré una solución simple (creo):

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}



-3

Sé que esta puede ser una solución simple, pero esto es lo que hago

$("#map_canvas").html("");
markers = [];

Siempre funciona para mí.


2
$ ("# map_canvas"). html (""); de hecho, limpiaría todo el div del mapa y también se basa en jQuery, por lo que su respuesta es estúpida y poco útil.
Sam

Si, eso es correcto. Inicializar el mapa y los marcadores
kronus

Pero él no quiere reiniciar el mapa, quiere eliminar los marcadores existentes ...
Sam

Solo estoy ofreciendo la forma en que he encontrado para eliminar los marcadores existentes. Al menos inténtalo y dime si funcionó o no. Funciona para mí
kronus

2
El punto principal de querer eliminar los marcadores del mapa es evitar tener que reiniciar el mapa, situaciones como la mía significaron que porque estaba usando la biblioteca de dibujo de Google para dibujar en el mapa si lo borro y reinicio todo el mapa todas las superposiciones que dibujé desaparecer, la única forma de detener eso es almacenar todas las superposiciones y volver a agregarlas, lo que también es mucho trabajo innecesario. Reinicializar el mapa no es eliminar los marcadores, sino recrearlo desde cero nuevamente, NO eliminar los marcadores.
Sam
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.