how to clear markers currently on the map

Question

I have working on a google api v3 web app. When the map loads it shows my current location using geolocation service and a marker is placed on that location. Now when I search for a place or try to find the direction between two places, I want to remove the all the markers that were previously on the map so that the only current markers would be the ones say for the start and end points of locations. But this is where i am having problems, anytime i search a new place or try to get new direction, the previous markers especially the one for the geolocation when the page loads is still showing.

I looked at the maps api and i saw the markers array they used to be removing previous markers. I put this in my code and it still doesn't work. I will paste my code so u can see for yourself.

---------------------------------MAPS.JS -----------------------------------------

var directionsDisplay;
var geocoder;
var map;
var markers = [];
var directionsService = new google.maps.DirectionsService();

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  geocoder = new google.maps.Geocoder();

  var mapOptions = {
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var marker = new google.maps.Marker({
         position: pos,
         map: map
      });

       markers.push(marker);
       map.setCenter(pos);
   }, function() {
        handleNoGeolocation(true);
      });
   } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
   }

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));

  var control = document.getElementById('control');
  control.style.display = 'block';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}


function calcRoute(start, end) {
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

$("#search").click(function() {
    var start = $.trim($("#start").val());
    var end = $.trim($("#end").val());
    if (start==="" && end === "") {
        alert("Enter a valid address");
    } 
    else {
         if (end.length === 0)
           searchPlace(start);
          else
            calcRoute(start, end);
    }

});

//search for a place
function searchPlace(start) {
    geocoder.geocode( { 'address': start}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          setAllMap(null);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
        markers.push(marker);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
}

//remove all current markers that are on the map
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}



google.maps.event.addDomListener(window, 'load', initialize);

----------------------------INDEX.HTML------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Direct</title>
<link rel="stylesheet" href="css/style.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>

<body>


    <div id="control">
      <strong>Start:</strong>
      <input id="start" type="text" />
      <strong>End:</strong>
      <input id="end" type="text" />
      <button id="search">Find place</button>
    </div>
    <div id="directions-panel"></div>
    <div id="map-canvas"></div>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/maps.js"></script>
</body>
</html>

Please take a look at the code and tell me where am going wrong.

score 1 · Answer 1 · answered Jul 11 '14 at 13:11

I assume this is where you're trying to remove the markers

//remove all current markers that are on the map
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

To remove a marker you need to set the map to null, this is how I do it.

function RemoveAllMarkers() {
    while (markers.length > 0) {
        markers.pop().setMap(null);
    }
    markers.length = 0;
}

how to clear markers currently on the map

1 Answers1