title: Clear Route in Google Maps directions
body: <p>I have a set of markers loaded from an XML; when clicked on a marker, I have directions rendered from current location to the marker position. However, I'd like to be able to clear a route, preferably when the user clicks on a different marker. Currently all the routes show up together. I can't figure out where I'm messing up. I've tried the directionsDisplay.setMap(null) but that doesn't clear them. Please let me know if you notice what the issue is. Thank you. </p>
  
  <pre><code>function loadGoogleMap(){
      // load google map
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;' +
          'callback=MyMap';
      document.body.appendChild(script);
  }
  
  
  var map = ''
  
  function MyMap(){
  
  /* 
  
  document.getElementById('finddate').value
  
   */
  
  var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
  var CustomMarker = 'http://findmyyard.com/images/MarkerIcon.png';
  
  if(navigator.geolocation){
  
      navigator.geolocation.getCurrentPosition(locate, noPos());
  } else { 
  
  noPos();
  
  }
  
  function locate(position){
  
  
        var directionsDisplay = new google.maps.DirectionsRenderer();
        var directionsService = new google.maps.DirectionsService();
  
      var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var mapOptions = {
        zoom: 12,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT},
        zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);
      var userMarker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: im
      });
  var infoWindow = new google.maps.InfoWindow;
  
  
  
    // Change this depending on the name of your PHP file
  
      downloadUrl("phps/xmltest.php", function(data) {
      var xml = data.responseXML;         
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var dt1 = markers[i].getAttribute("date1");
        var dt2 = markers[i].getAttribute("date2");
        var dt3 = markers[i].getAttribute("date3");
        var tm1 = markers[i].getAttribute("time1");
        var tm2 = markers[i].getAttribute("time2");
        var tm3 = markers[i].getAttribute("time3");
        var pid = markers[i].getAttribute("PID");
        var d = new Date();
        var raw = pid * d.getFullYear();
        var jshtml = '&lt;a href='+'phps/info.php?raw='+ raw +'&gt;More Info&lt;/a&gt;'
        var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + "Date of Yard Sale: " + dt1 + '&amp;nbsp;' + tm1 + '&amp;nbsp;' + dt2 + '&amp;nbsp;' + tm2 + '&amp;nbsp;' + dt3 + '&amp;nbsp;' + tm3 + '&amp;nbsp;' + "&lt;br/&gt;" + address + "&amp;nbsp;" + "Click this for: " + jshtml;
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: CustomMarker
        });
  
  
  
        bindInfoWindow(marker, map, infoWindow, html, directionsDisplay);
      }
  
  
     });
  
  
  
  
  function bindInfoWindow(marker, map, infoWindow, html, directionsDisplay) {
  
  
    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.setContent(html);
      infoWindow.open(map, marker, html);
      center: position;
  
       directionsDisplay.setMap(null)
      directionsDisplay.setDirections({routes: []});  
      directionsDisplay = null;   
  
  
  
                            directionsDisplay = new google.maps.DirectionsRenderer();
                            directionsDisplay.setMap(map)
                            var start = myLatLng;
                            var latitude = marker.getPosition().lat().toFixed(6) 
                            var longitude = marker.getPosition().lng().toFixed(6)
                            var end = new google.maps.LatLng(latitude, longitude);
                            var request = {
                              origin:start,
                              destination:end,
                              travelMode: google.maps.TravelMode.DRIVING
                            };
                            directionsService.route(request, function(result, status) {
  
                              if (status == google.maps.DirectionsStatus.OK) {
  
                                  directionsDisplay.setMap(null)
                                  directionsDisplay.setMap(map);  
                                directionsDisplay.setDirections(result);  
  
                              }
                            });
  
  
    });
  }
  
  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
  
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };
  
  
       request.open('GET', url, true);
    request.send();
  }
       function doNothing() {}
  }
  </code></pre>