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

Question

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

Why don't you just move the existing marker to the new position? No need to remove and re-create. — Marcelo, Jan 19 '13 at 08:40
possible duplicate of [Google Maps API v3: How to remove all markers?](http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers) — Touchpad, Mar 28 '14 at 12:55

score 4 · Answer 1 · answered Oct 27 '15 at 11:21

Just remove the previous marker if there is one.

var Marker;
function placeMarker(position, map) {
  if(typeof marker!= 'undefined')
      marker.setMap(null);
  var Marker = new google.maps.Marker({
     position: position,
     map: map
  });
  map.panTo(position);

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

score 2 · Accepted Answer · edited May 23 '17 at 12:16

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?

I had to make a few tweaks, but was able to follow the code you provided and its working great. many many thanks! — tamak, Jan 19 '13 at 17:28

score 0 · Answer 3 · answered Oct 07 '16 at 23:42

You can set the marker on first click and then just change the position on subsequent clicks.

var marker;

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

function placeMarker(location) {
  if (marker == null) {
    marker = new google.maps.Marker({
          position: location,
          map: map
      });
  } else {
    marker.setPosition(location);
  }
}

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

3 Answers3