title: Get directions issues with Google maps
body: <p>I'm quite new at this, the problem is the directions panel wont go away when you click reset and how do I get the travel mode options to function. Thank You
  HTML code</p>
  
  <pre><code>&lt;body onload="initialize()"&gt;
      &lt;div id="container"&gt;
          &lt;div id="directions"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;b&gt;Start: &lt;/td&gt;&lt;/b&gt;
                      &lt;td&gt;
                          &lt;select id="start"&gt;
                              &lt;option value="6.517611, 3.385452"&gt;Main Gate&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;End: &lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select id="end" &gt;
                          &lt;option value=""&gt;&lt;i&gt;choose from list&lt;/i&gt;&lt;/option&gt;
                          &lt;option value="6.516177, 3.397873"&gt;Jaja Hall&lt;/option&gt;
                          &lt;option value="6.515228, 3.398034"&gt;Chemical Engineering Dept&lt;/option&gt;
                          &lt;option value="6.515546, 3.399022"&gt;Faculty of Sciences&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;&lt;br /&gt;
  &lt;td&gt;
      &lt;select id="mode" onchange="updateMode()"&gt;
          &lt;option value="bicycling"&gt;Bicycling&lt;/option&gt;
          &lt;option value="driving"&gt;Driving&lt;/option&gt;
          &lt;option value="walking"&gt;Walking&lt;/option&gt;
      &lt;/select&gt;
  &lt;/td&gt;
  &lt;input type="button" value="Get Directions" onclick="calcRoute()" /&gt;
  &lt;input type="button" value="Reset" onclick="reset()" /&gt;
  &lt;/div&gt;
  &lt;div id="directionsPanel"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>javascript codes:  </p>
  
  <pre><code>var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var latlng = new google.maps.LatLng(6.514885,3.393742);
  var mapOptions = {
  zoom:16,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: latlng
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var mode;
  switch (document.getElementById("mode").value) {
  case "bicycling":
  mode = google.maps.DirectionsTravelMode.BICYCLING;
  break;
  case "driving":
  mode = google.maps.DirectionsTravelMode.DRIVING;
  break;
  case "walking":
  mode = google.maps.DirectionsTravelMode.WALKING;
  break;
  }
  var request = {
  origin:start,
  destination:end,
  travelMode: mode
  };
  directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
  }
  });
  }
  function updateMode() {
  if (directionsVisible) {
  calcRoute();
  }
  }
  function clearMarkers() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var latlng = new google.maps.LatLng(6.514885,3.393742);
  var mapOptions = {
  zoom:16,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: latlng
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  end_loc = document.getElementById('end')
  end_loc.value = ""
  } 
  function reset() {
  clearMarkers();
  directionsDisplay.setMap(null);
  directionsDisplay.setPanel(null);
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
  </code></pre>