title: Changing the units on google maps from metric to imperial
body: <p>I have the following code:</p>
  
  <pre><code>&lt;script&gt;
  
        var rendererOptions = {
          draggable: false
        };
        var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
        var directionsService = new google.maps.DirectionsService();
        var map;
  
        var England = new google.maps.LatLng(53.7415, 1.6860);
  
        function initialize() {
  
          var mapOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: England
          };
          map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
          map.setTilt(45);
          directionsDisplay.setMap(map)
          directionsDisplay.setPanel(document.getElementById('directionsPanel'));
  
          google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
            computeTotalDistance(directionsDisplay.directions);
          });
  
          calcRoute();
        }
  
        function calcRoute() {
  
          var request = {
            origin: 'postcode',
            destination: 'postcode',
            waypoints:[{location: 'waypoint postcode'}, {location: 'waypoint postcode'}, {location: 'waypoint postcode'}],
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
          });
        }
  
        function computeTotalDistance(result) {
          var total = 0;
          var myroute = result.routes[0];
          for (i = 0; i &lt; myroute.legs.length; i++) {
            total += myroute.legs[i].distance.value;
          }
          total = total / 1000.
          document.getElementById('total').innerHTML = total + ' km';
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="initialize()"&gt;
      &lt;div id="map_canvas" style="float:left;width:70%; height:100%"&gt;&lt;/div&gt;
      &lt;div id="directionsPanel" style="float:right;width:30%;height 100%"&gt;
      &lt;p&gt;Total Distance: &lt;span id="total"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The map, shows an origin and destination, with certain waypoints along the way, using google api's direction service. The directions panel shows all distances in metric units. How do I change it, so that all distances are shown in imperial units i.e miles,feet?</p>