CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
tamak
tamak

Reputation: 1591

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

Upvotes: 3

Views: 9877

Answers (3)

j0j0j0
j0j0j0

Reputation: 1

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

Upvotes: 0

Fran Mauri
Fran Mauri

Reputation: 41

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

Upvotes: 4

Sunil Gulabani
Sunil Gulabani

Reputation: 928

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?

Upvotes: 2

Related Questions