API do Google Maps v3: como remover todos os marcadores?


429

Na API do Google Maps v2, se eu quisesse remover todos os marcadores de mapa, poderia simplesmente fazer:

map.clearOverlays();

Como faço isso na API do Google Maps v3 ?

Olhando para a API de referência , não está claro para mim.


3
Encontrei algum código no link abaixo, mas vaca sagrada - é um monte de código para simular a linha de código 1 anterior na v2 da API. lootogo.com/googlemapsapi3/markerPlugin.html
mp_ 9/10/10

2
lembre-se que mapeia 3.0 destina-se a ser muito leve para que dispositivos móveis para usá-lo com o mínimo de atraso possível ...
Petrogad

1
As soluções sugeridas aqui parecem estar quebradas a partir de 29/07/2010. Eu gostaria de ter uma versão de trabalho a sugerir.
Jonathan Hanson

9
A resposta mais alta está errada. Veja a fonte neste exemplo para ver como fazê-lo: google-developers.appspot.com/maps/documentation/javascript/…
Seb Ashton

Respostas:


487

Simplesmente faça o seguinte:

I. Declare uma variável global:

var markersArray = [];

II Defina uma função:

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

OU

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

III Empurre marcadores no 'markerArray' antes de chamar o seguinte:

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

IV Ligue para a função clearOverlays();ou map.clearOverlays();sempre que necessário.

É isso aí!!


32
for..in loop com uma matriz? isso não pode ser bom, certamente ..? Veja como: stackoverflow.com/questions/500504/…
zack

4
Como alternativa, você pode ocultar marcadores usando o marker.setVisible (false)
NBK

12
Os marcadores ainda são mantidos na matriz, para que cresça cada vez mais. Sugeriria limpar a matriz bem após o loop
Ami

5
você sempre pode definir markersArraypara uma matriz vazia em vez de definir o seu comprimento, o que eu acho meio estranho:markersArray = [];
hellatan

11
Eu usaria uma whileabordagem para o processamento da matriz: while(markersArray.length) { markersArray.pop().setMap(null); }. Não há necessidade de limpar a matriz depois disso.
YingYang

84

Mesmo problema. Este código não funciona mais.

Eu o corrigi, altere o método clearMarkers da seguinte maneira:

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();
};

A documentação foi atualizada para incluir detalhes sobre o tópico: https://developers.google.com/maps/documentation/javascript/markers#remove


1
A maneira que eu finalmente tenho que trabalhar era para percorrer a coleção de marcadores de onde eu armazenados-los e usá setMap (null)
Sebastian

4
Mas isso limpa os marcadores da memória? Sei que o JavaScript tem coleta automática de lixo, mas como sabemos que a API do Google não contém uma referência ao marcador quando setMap (null) é chamado? No meu aplicativo, adiciono e "excluo" uma tonelada de marcadores e detestaria que todos esses marcadores "excluídos" estivessem sugando memória.
Nick

@ Nick: adicione 'delete this.markers [i];' após o bit setMap (nulo).
Daves

4
Esta pergunta está respondida na documentação agora. code.google.com/apis/maps/documentation/javascript/…
lashleigh 20/01

1
Quem usa new Array();?
Rihards

47

Parece que ainda não existe essa função na V3.

As pessoas sugerem manter referências a todos os marcadores que você possui no mapa em uma matriz. E então, quando você quiser excluir todos eles, faça um loop na matriz e chame o método .setMap (null) em cada uma das referências.

Veja esta pergunta para mais informações / código.

Minha versão:

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);
}

O código está na versão editada deste código http://www.lootogo.com/googlemapsapi3/markerPlugin.html Removai a necessidade de chamar o addMarker manualmente.

Prós

  • Dessa maneira, você mantém o código compacto e em um só lugar (não polui o espaço para nome).
  • Você não precisa mais acompanhar os marcadores; sempre é possível encontrar todos os marcadores no mapa chamando map.getMarkers ()

Contras

  • O uso de protótipos e invólucros como eu fiz agora torna meu código dependente do código do Google. Se eles fizerem uma alteração maior na fonte, isso será interrompido.
  • Se você não entender, não poderá corrigi-lo se quebrar. As chances são pequenas de que eles mudem qualquer coisa que possa quebrar isso, mas ainda assim ..
  • Se você remover um marcador manualmente, sua referência ainda estará na matriz de marcadores. (Você pode editar meu método setMap para corrigi-lo, mas com o custo de fazer um loop na matriz de marcadores e remover a referência)

1
+1 de mim. Mas sua resposta seria melhor se você incluísse o wrapper para chamar o addMarker automaticamente!
Andrew

Suponho que você esteja se referindo à resposta de Andrews, na verdade. Você mostraria com código o que faria de diferente e por quê. Obrigado
mp_

Meh, desculpe pelo atraso, eu estava impedindo a publicação do código porque não tinha como testá-lo rapidamente.
Maiku Mori 09/10/09

Obrigado Maiku. No entanto, eu não entendo - como adiciono um novo marcador no seu exemplo. Mais uma vez, muito obrigado!
#

1
Tentei usar setMap (null), mas tinha um script de atualização automática e toda vez que colocava todos os 50 marcadores em um mapa nulo, ainda havia um monte de marcadores sem foco flutuando no DOM em algum lugar. Isso continuava causando o travamento da página, pois a cada 30 segundos ele adicionava 50 novos marcadores ao DOM, e isso se propagava infinitamente porque a página permanecia aberta 24 horas por dia, 7 dias por semana, em um mural de vídeos. Eu tive que usar a resposta superior e limpar todas as superposições de mapa do DOM completamente antes de criar novas. Espero que isso ajude alguém; demorou muito tempo para eu descobrir por que minha página estava travando! :(
InterfaceGuy

23

Esta foi a mais simples de todas as soluções postadas originalmente por YingYang 11 / mar '14 às 15: 049, na resposta original à pergunta original do usuário

Estou usando a mesma solução 2,5 anos depois com o google maps v3.18 e funciona como um encanto

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();
};

Eu não acho que exista um na V3, então usei a implementação personalizada acima.

Isenção de responsabilidade: não escrevi esse código, mas esqueci de manter uma referência quando a mesclei à minha base de código, para não saber de onde veio.


+1 de mim. Eu adicionaria um wrapper ao redor do construtor google.maps.Marker (ou método setMap, já que acho que o construtor o chama internamente), que chama o addMarker automaticamente, mas ainda assim uma boa resposta :).
Maiku Mori 09/10/09

@ Maya Mari, você mostraria com código o que faria de diferente e por quê. Obrigado
mp_

Como isso não é a solução? Você remove marcadores usando set_map (null) no marcador específico que deseja limpar, se desejar limpar tudo e fazer um loop usando essa função. Se você quiser algo mais, solicite aqui: code.google.com/p/gmaps-api-issues/issues/…
Petrogad


6
-1 Estilo ruim. Existe apenas uma matriz de marcadores criada, mas uma por mapa após clearMarkers (causa da diferença de obter / definir com protótipos). Erros desagradáveis ​​com vários objetos de mapa.
Tomas

18

Na nova versão v3, eles recomendaram manter as matrizes. como segue.

Veja o exemplo na visão geral da sobreposição .

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

A Galeria de demonstração do Google tem uma demonstração de como eles fazem isso:

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

Você pode ver o código fonte para ver como eles adicionam marcadores.

Para encurtar a história, eles mantêm os marcadores em uma matriz global. Ao limpá-los / excluí-los, eles fazem um loop na matriz e chamam ".setMap (null)" no objeto marcador especificado.

No entanto, este exemplo mostra um 'truque'. "Limpar" neste exemplo significa removê-los do mapa, mas mantê-los na matriz, o que permite que o aplicativo os adicione novamente rapidamente ao mapa. Em certo sentido, isso age como "escondê-los".

"Excluir" limpa a matriz também.


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

está trabalhando apenas no IE.


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

trabalhando no chrome, firefox, ou seja ...


1
Por favor, leia a ajuda sobre a formatação do código no SO
freefaller

6

A solução é bastante fácil. Você pode usar o método: marker.setMap(map);. Aqui, você define em qual mapa o pino aparecerá.

Portanto, se você definir nulleste método ( marker.setMap(null);), o alfinete desaparecerá.


Agora, você pode escrever uma função enquanto faz desaparecer todos os marcadores no seu mapa.

Você acabou de adicionar para colocar seus pinos em uma matriz e declará-los com markers.push (your_new pin)ou com este código, por exemplo:

// 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 é uma função que pode definir ou desaparecer todos os marcadores da sua matriz no 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 os seus marcadores, você deve chamar a função com null:

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

E, para remover e desaparecer, todos os seus marcadores, você deve redefinir sua matriz de marcadores assim:

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

Este é o meu código completo. É o mais simples que eu poderia reduzir. Cuidado, você pode substituir YOUR_API_KEYo código pela sua API principal do Google:

<!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>

Você pode consultar o desenvolvedor do Google ou a documentação completa, também, no site do desenvolvedor do Google .


5

Uma aplicação limpa e fácil da resposta 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

Aqui você pode encontrar um exemplo de como remover 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

O seguinte da Anon funciona perfeitamente, embora com cintilação ao limpar repetidamente as sobreposições.

Simplesmente faça o seguinte:

I. Declare uma variável global:

var markersArray = [];

II Defina uma função:

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

III Empurre marcadores no 'markerArray' antes de chamar o seguinte:

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

IV Chame a clearOverlays()função sempre que necessário.

É isso aí!!

Espero que ajude você.


1
for(in in markersArray){}provavelmente não faz o que você espera. Se Arrayfor estendido para qualquer outro lugar do código, ele também repetirá essas propriedades, e não apenas os índices. A versão javascript disso markersArray.forEach()não é suportada em todos os lugares. Você seria melhor comfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
Kit Sunde

3

Eu achei o uso da biblioteca markermanager no projeto google-maps-utility-library-v3 como a maneira mais fácil.

1. Configure o MarkerManager

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

2. Adicione marcadores ao MarkerManager

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

3. Para apagar marcadores, basta chamar a clearMarkers()função MarkerManger

mgr.clearMarkers();

Parece muito exagero atrair essa biblioteca para limpar os marcadores. Tudo o que clearMarkersfaz é iterar sobre os marcadores que chamam marker.setMap(null)(verifiquei a fonte). Seria menos trabalho colocá-los em uma matriz e fazê-lo você mesmo.
Kit Sunde

3

Você também pode fazer o seguinte:

function clearMarkers(category){ 
  var i;       

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

2

Eu apenas tentei isso com kmlLayer.setMap (null) e funcionou. Não tenho certeza se isso funcionaria com marcadores regulares, mas parece funcionar corretamente.


2

Para limpar todas as sobreposições, incluindo polys, marcadores, etc ...

basta usar:

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

Aqui está uma função que eu escrevi para fazer isso em um aplicativo de mapa:

  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"));
}

isso também não redefiniria o mapa? suponha que se o usuário arrastou o mapa para uma nova área?
Kichu

2

Para remover todos os marcadores do mapa, crie funções como esta:

1.addMarker (localização): esta função é usada para adicionar marcador no mapa

2.clearMarkers (): esta função remove todos os marcadores do mapa, não da matriz

3.setMapOnAll (map): esta função usada para adicionar informações de marcadores na matriz

4.deleteMarkers (): esta função Exclui todos os marcadores da matriz removendo referências a eles.

// 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

A maneira mais limpa de fazer isso é repetir todos os recursos do mapa. Marcadores (junto com polígonos, polilinhas, etc.) são armazenados na camada de dados do mapa.

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

No caso de os marcadores serem adicionados via gerenciador de desenhos , é melhor criar uma matriz global de marcadores ou empurrá-los para a camada de dados na criação, da seguinte maneira:

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);
    }
  });

Eu recomendo a segunda abordagem, pois ela permite que você use outros métodos de classe google.maps.data posteriormente.



0

Não sei por que, mas definir setMap(null)meus marcadores não funcionou para mim quando estou usando DirectionsRenderer.

No meu caso, eu tive que ligar setMap(null)para o meu DirectionsRenderertambém.

Algo parecido:

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

Basta passar por cima dos marcadores e removê-los do mapa, os marcadores de mapas vazios depois disso:

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


0

Eu tentei todas as soluções propostas, mas nada funcionou para mim enquanto todos os meus marcadores estavam em um cluster. Acabei de colocar isso:

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

Em outras palavras, se você agrupar marcadores em um cluster e quiser remover todos os marcadores, chame:

clearMarkers();

-1

Você quer remover como escondê-los ou excluí-los?

se escondendo:

function clearMarkers() {
            setAllMap(null);
        }

se você deseja excluí-los:

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

observe que eu uso marcadores de matriz para acompanhá-los e redefini-los manualmente.


-1

Você precisa definir o mapa nulo para esse 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

Encontrei solução simples (acho):

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

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



-3

Eu sei que isso talvez seja uma solução simples, mas é isso que eu faço

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

Funciona todas as vezes para mim.


2
$ ("# map_canvas"). html (""); de fato, limparia toda a div do mapa e também depende do jQuery, para que sua resposta seja estúpida e inútil.
Sam

Sim, está correto. Inicialize o mapa e os marcadores
kronus 4/15/15

Mas ele não quer reinicializar o mapa que quer remover marcadores existentes ....
Sam

Estou apenas oferecendo o caminho que encontrei para remover os marcadores existentes. Pelo menos tente e me diga se funcionou ou não. Funciona para mim
kronus

2
O ponto principal de querer remover marcadores de mapa é evitar ter que reinicializar o mapa, situações como a minha significavam que, porque eu estava usando a biblioteca de desenhos do Google para desenhar no mapa, se eu removê-lo e reinicializar o mapa inteiro, todas as sobreposições que desenhei desaparecer, a única maneira de parar isso é armazenar todas as sobreposições e adicioná-las novamente, o que também é um monte de trabalho desnecessário. Reinicializar o mapa não está removendo os marcadores, está recriando-o do zero novamente NÃO removendo os marcadores.
Sam
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.