title: Google Maps Marker Drag End Directions - Clear Previous Route
body: <p>I am using the Google Maps API v3, and I have implemented a directions rendered based on a marker drag end function. But if you drag the marker again then the original set of directions are not removed.</p>
  
  <p>The map is generated based of a geocoding request and autocomplete textbox for source and the destination is static. This all works fine. I have read the API documentation and it says use the .setMap(null); option but it is not clearing the directions, and I believe this is because I am not regenerating the map. My code for the rendering of the directions is below:</p>
  
  <pre class="lang-js prettyprint-override"><code>google.maps.event.addListener(markersrc, 'dragend', function () {
      geocoder.geocode({ 'latLng': markersrc.getPosition() }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              var request = {
                  origin: markersrc.getPosition(),
                  destination: markerdst.getPosition(),
                  travelMode: google.maps.DirectionsTravelMode.DRIVING
              };
              var directionsDisplay = new google.maps.DirectionsRenderer();
              var directionsService = new google.maps.DirectionsService();
              directionsDisplay.suppressMarkers = true;
              directionsDisplay.setMap(map);
              directionsDisplay.setPanel(document.getElementById("directions_panel"));
              directionsService.route(request, function (response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                      directionsDisplay.setDirections(response);
                  }
              });
          }
      });
  });
  </code></pre>
  
  <p>Anyone have any idea how I can get the original directions cleared?</p>