removing previous marker before adding new marker in google maps

Question

I have below code to display marker in the place that I click on map. Its working perfectly and the thing is I want to remove the previous map marker when adding new marker. Where I should make changes to work perfectly.

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

                    latLng = e.latLng;

                    console.log(e.latLng.lat());
                    console.log(e.latLng.lng());

                    image = clientURL + "/common/images/markers/red.png";
                    console.log("Marker");
                    marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        icon: image
                    });


                });

I refered many links that was not working for my case To remove previous markers before adding new Markers

Answer 1

Add code to remove the marker from the map if it exists and has a .setMap method (assumes the existing marker is available in the current scope or is global):

if (marker && marker.setMap) {
    marker.setMap(null);
}

complete function:

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

  latLng = e.latLng;

  console.log(e.latLng.lat());
  console.log(e.latLng.lng());

  image = clientURL + "/common/images/markers/red.png";
  console.log("Marker");
  // if marker exists and has a .setMap method, hide it
  if (marker && marker.setMap) {
    marker.setMap(null);
  }
  marker = new google.maps.Marker({
    position: latLng,
    map: map,
   icon: image
  });
});

proof of concept fiddle

code snippet:

var geocoder;
var map;
var marker;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map, "click", function(e) {

    latLng = e.latLng;

    console.log(e.latLng.lat());
    console.log(e.latLng.lng());

    console.log("Marker");
    // if marker exists and has a .setMap method, hide it
    if (marker && marker.setMap) {
      marker.setMap(null);
    }
    marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Answer 2

In HTML code and add google map api key

<div id="map_div" style="width:100%;height:85px;"></div>

In javascript code

var add_marker = null,map = null;  //Declare vaiable

// map load 
map = new google.maps.Map(document.getElementById('map_div'),{
      zoom:10,
      position: new google.maps.LatLng(11.342423,77.728165),
      mapTypeId: google.maps.MapTypeId.ROADMAP
});

// first time map load set marker static
add_marker = new google.maps.Marker({
      map:map,
      position:new google.maps.LatLng(11.342423,77.728165),
      zoom:10
});

map.addListener("click",function(e){
    if(add_marker != null) {            //already set marker to clear
       add_marker.setMap(null);
       add_marker = null;
    }

    // Dynamic to set marker based on click event
    add_marker = new google.maps.Marker({
            map:map,
            position:new google.maps.LatLng(e.latLng.lat(),e.latLng.lng()),
            zoom:10
    });
});

Answer 3

Similar to the answer you linked in your question you need to maintain a global reference to the last marker added to the map (the previous marker to be removed).

var map;
var previousMarker; // global variable to store previous marker
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  map.addListener('click', function(e) {
      // if the previousMarker exists, remove it
      if (previousMarker)
        previousMarker.setMap(null);

      latLng = e.latLng;

      console.log(e.latLng.lat());
      console.log(e.latLng.lng());

      //image = clientURL + "/common/images/markers/red.png";
      console.log("Marker");
      previousMarker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }

  );
}