Google Maps JavaScript API v3 supprimer des marqueurs

Question

J'ai regardé un grand nombre de questions "similaires" et aucune des solutions/réponses ne semble fonctionner pour moi alors voilà: je génère une simple carte Google avec un seul marqueur « onload » J'ai alors une liste de menu un peu comme ce

<ul> 
<li class="toggle" id="beaches">Item</li> 
<li class="toggle" id="towns">Item</li> 
<ul> 

que sur clic utilise ces tableaux pour marqueurs peupler la carte

jQuery -

$(".toggle").click(function(){ 
setMarkers(map,$(this).attr('id')); 
}); 

var beaches = [ 
['Beach 1',38.285827, 20.611038, 4], 
['Beach 2', 38.304958,20.604515, 5], 
['Beach 3',38.301691,20.597649, 3] 
]; 

var towns = [ 
['Town 1',38.343003, 20.535679, 4], 
['Town 2',38.339334,20.545807, 5] 
]; 

Mon plaisir de la population ction ressemble à ceci:

function setMarkers(map, locations) { 
for (var i = 0; i < locations.length; i++) { 
var newmarker = locations[i]; 
var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
title: newmarker[0], 
zIndex: newmarker[3] 
}); 
} 

Mais ce que je dois/veux faire est clair tous marqueurs avant d'ajouter les nouveaux. Suggestions merci

Answer 1

Vous devez stocker des marqueurs et appeler le setMap(null) pour chaque marqueur à retirer de la carte.

Vous pouvez essayer quelque chose comme ceci:

var setMarkers = (function() { 
    var oldMarkers = null; 
    return function(map, locations){ 
     //Clearing markers, if they exist 
     if(oldMarkers && oldMarkers.length !== 0){ 
      for(var i = 0; i < oldMarkers.length; ++i){ 
       oldMarkers[i].setMap(null); 
      } 
     } 
     //Adding new markers 
     oldMarkers = []; 
     for (var i = 0; i < locations.length; i++) { 
      var newmarker = locations[i]; 
      var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       title: newmarker[0], 
       zIndex: newmarker[3] 
      }); 
      oldMarkers.push(marker); 
     } 
    }; 
})(); 

Answer 2

Vous pouvez définir un tableau global de marqueurs et de compensation ceux en appelant setMap(null) avant de repeupler la carte:

var markers = []; 

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
     var newmarker = locations[i]; 
     var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 

     if (markers[i]) { 
      markers[i].setMap(null); 
     } 

     markers[i] = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: newmarker[0], 
      zIndex: newmarker[3] 
     }); 
    } 
} 

Answer 3

Peut-être que vous pourriez utiliser une fonction qui vide le tableau qui contient des marqueurs:

function clear(){ 
    if(locations){ 
     for(var i=0;i<location.length;i++){ 
      locations[i].setMap(null); 
     } 
     locations.length=0; 
    } 
} 

Answer 4

Yo u besoin de vous assurer que vos marqueurs sont stockés dans un tableau, puis pour enlever faire quelque chose comme

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

     } 

donc votre code serait maintenant

var markers []; 

function setMarkers(map, locations) { 
// remove all markers first 
removeMarkers(); 
for (var i = 0; i < locations.length; i++) { 
var newmarker = locations[i]; 

var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
title: newmarker[0], 
zIndex: newmarker[3] 
}); 
//add to marker array 
markers.push(marker); 
}