CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-api
Robert Martens
Robert Martens

Reputation: 173

Changing the units on google maps from metric to imperial

I have the following code:

<script>

      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 < myroute.legs.length; i++) {
          total += myroute.legs[i].distance.value;
        }
        total = total / 1000.
        document.getElementById('total').innerHTML = total + ' km';
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="float:left;width:70%; height:100%"></div>
    <div id="directionsPanel" style="float:right;width:30%;height 100%">
    <p>Total Distance: <span id="total"></span></p>
    </div>

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?

Upvotes: 2

Views: 6950

Answers (1)

epascarello
epascarello

Reputation: 207537

From the docs

Unit Systems

By default, directions are calculated and displayed using the unit system of the origin's country or region. (Note: origins expressed using latitude/longitude coordinates rather than addresses always default to metric units.) For example, a route from "Chicago, IL" to "Toronto, ONT" will display results in miles, while the reverse route will display results in kilometers. You may override this unit system by setting one explicitly within the request using one of the following UnitSystem values:

  • UnitSystem.METRIC specifies usage of the metric system. Distances are shown using kilometers.
  • UnitSystem.IMPERIAL specifies usage of the Imperial (English) system. Distances are shown using miles.

Note: this unit system setting only affects the text displayed to the user. The directions result also contains distance values, not shown to the user, which are always expressed in meters.

Upvotes: 3

Related Questions