how remove google map api marker after set

Question

with my code , several markers appears each time you click on the map.

i want to just one single marker ,and each click remove previous marker and set new marker's lat/lng to new position.

here is my code:

  var map;
  var markers = [];

  function initMap() {
      var aa = {lat: 32.3896651, lng: 48.3791718};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: aa
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
      document.getElementById("la").value = event.latLng.lat();
 document.getElementById("lo").value = event.latLng.lng();
    });



  }

  // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
    flat: false,
    map: map,
    draggable: true
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

Possible duplicate of Google Maps API v3: How to remove all markers? — user7652403

dev8080 dev8080 · Accepted Answer · 2017-04-18T05:37:56

By adding new markers each time, you are creating many objects in your page. Why not re-use existing marker? Make marker global instead of markers array,

var marker = null;

and then use setPosition to change position of your existing marker object :

marker.setPosition(location);

This way, you are using just one marker, just at different positions.

 var map;
 var marker = null;

function initMap() {
     var aa = {lat: 32.3896651, lng: 48.3791718};

     map = new google.maps.Map(document.getElementById('map'), {
       zoom: 12,
       center: aa
     });

// This event listener will call addMarker() when the map is clicked.
     map.addListener('click', function(event) {
         addMarker(event.latLng);
         document.getElementById("la").value = event.latLng.lat();
         document.getElementById("lo").value = event.latLng.lng();
     });

   }

// Adds a marker to the map and push to the array.
function addMarker(location) {
        if(marker)
            marker.setPosition(location);
        else
            marker = new google.maps.Marker({
                position: location,
                flat: false,
                map: map,
                draggable: true
        });

    }

 // Sets the map on all markers in the array.
 function setMapOnAll(map) {

      marker.setMap(map);

  }

   // Removes the markers from the map, but keeps them in the array.
   function clearMarkers() {
     marker.setMap(null);
   }

   // Shows any markers currently in the array.
   function showMarkers() {
     marker.setMap(map);
   }

   // Deletes all markers in the array by removing references to them.
   function deleteMarkers() {
     clearMarkers();
   }

how remove google map api marker after set

2 Answers