I have looked at a large number of "similar" questions and none of the solutions/answers seem to work for me so here we go: I am generating a simple Google Map with a single marker "onload" I then have a menu list a bit like this
<ul>
<li class="toggle" id="beaches">Item</li>
<li class="toggle" id="towns">Item</li>
<ul>
that on click uses these arrays to marker-populate the map
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]
];
My population function looks like this:
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]
});
}
But what I need/want to do is clear all markers first before adding the new ones. Suggestions please Thanks
I have looked at a large number of "similar" questions and none of the solutions/answers seem to work for me so here we go: I am generating a simple Google Map with a single marker "onload" I then have a menu list a bit like this
<ul>
<li class="toggle" id="beaches">Item</li>
<li class="toggle" id="towns">Item</li>
<ul>
that on click uses these arrays to marker-populate the map
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]
];
My population function looks like this:
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]
});
}
But what I need/want to do is clear all markers first before adding the new ones. Suggestions please Thanks
Share Improve this question edited May 17, 2012 at 7:07 Engineer 48.8k12 gold badges90 silver badges92 bronze badges asked May 17, 2012 at 6:56 Russell ParrottRussell Parrott 9037 gold badges19 silver badges39 bronze badges4 Answers
Reset to default 9You need to store markers, and call setMap(null)
for every marker to remove from map.
You could try something like this:
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 );
}
};
})();
Maybe you could use one function that empty array that contains markers:
function clear(){
if(locations){
for(var i=0;i<location.length;i++){
locations[i].setMap(null);
}
locations.length=0;
}
}
You need to make sure your markers are stored in a array and then to remove do some thing like
// 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;
}
So your code would now be
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);
}
You could define a global array of markers and clearing those by calling setMap(null)
before you re-populate the map:
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]
});
}
}