tamak tamak - 1 month ago 24
Javascript Question

Google Maps api v3 - remove marker before adding new one from click event

Im using the following code and trying to figure out how to add a function I can call that will remove the previous marker before adding a new one. the map uses onclick events to add marker where the user clicks... basically i only want one marker on the map at any given time.

i've searched and tried almost everything but must be doing it wrong somehow... please give the code a quick glance and let me know how it would be achieved.

thanks a million!

<script>
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(document.getElementById('field_lat').value,document.getElementById('field_lng').value),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);

google.maps.event.addListener(map, 'click', function(e) {


// SET MY UI SEARCH TEXT FIELDS TO THE LAT AND LNG
document.getElementById('field_lat').value = e.latLng.lat();
document.getElementById('field_lng').value = e.latLng.lng();


placeMarker(e.latLng, map);
});
}

function placeMarker(position, map) {
//Marker.setMap(null);
var Marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);

$("#listbox ul").empty();
docall();
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>


the map is in the body as follows

<div id="map_canvas" style="width: 400px; height: 400px;"></div>


I tried to try to get this or something similar to work but no dice...

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

Answer

Simply do the following:

I. Declare a global variable:

var markersArray = [];

II. Define a function:

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

OR

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

III. Push markers in the 'markerArray' before calling the following:

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

IV. Call the function wherever required.

clearOverlays();

OR

map.clearOverlays(); 

That's it!!

Hope that will help you.

Source: Google Maps API v3: How to remove all markers?

Comments