CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
DwayneA
DwayneA

Reputation: 149

Google maps clear all markers before placing new one

I'm trying to place a marker on click in google maps along with populating input boxes with the lat and lng. I need the code to clear all the existing markers first before placing the new marker and updating the lat and lng. everything works except when I add code to try clear all the markers.

The below code works perfectly but does not clear the old markers before placing the new one.

Thank you.

Working code without clearing existing markers... 

<div id="map"></div>
<script>

var map;


  function initMap() {

    var latlng = new google.maps.LatLng(-29, 25);
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: latlng,
    });

            google.maps.event.addListener(map, 'click', function(event){
            var marker_position = event.latLng;   
            marker = new google.maps.Marker({
            map: map,
            draggable: false
        }); 
   marker.setPosition(marker_position);   
   document.getElementById("latFld").value = event.latLng.lat();
   document.getElementById("lngFld").value = event.latLng.lng();
})                      
  }  
    </script>

Not working code with clearing markers before adding a new one...

<div id="map"></div>
<script>

var map;
    var markersArray = [];

  function initMap() {

    var latlng = new google.maps.LatLng(-29, 25);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: latlng,
    });
            markersArray.push(marker);
    google.maps.event.addListener(marker,"click",function(event){});
            google.maps.event.addListener(map, 'click', function(event){
            var marker_position = event.latLng;   
    marker = new google.maps.Marker({
            map: map,
            draggable: false
        });
   clearOverlays();
   marker.setPosition(marker_position);   
   document.getElementById("latFld").value = event.latLng.lat();
   document.getElementById("lngFld").value = event.latLng.lng();
})   

  }

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

Thank you.

Upvotes: 1

Views: 5090

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133360

seem you have placed the code in the wrong place .. try 

<div id="map"></div>
<script>

var map;
var markersArray = [];

function initMap() {

    var latlng = new google.maps.LatLng(-29, 25);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: latlng,
    });

   clearOverlays();
    marker = new google.maps.Marker({
            map: map,
            draggable: false
    });

    google.maps.event.addListener(marker,"click",function(event){});
    google.maps.event.addListener(map, 'click', function(event){
    var marker_position = event.latLng;   
        marker.setPosition(marker_position);   
        markersArray.push(marker);
       document.getElementById("latFld").value = event.latLng.lat();
       document.getElementById("lngFld").value = event.latLng.lng();
    })   
} 

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

Upvotes: 5

Related Questions