How Can I Get The Total Distance In Km In My Javascript

How can i get the total distance in KM in my javascript. It is shown already on top of the Panel, but i need this value also in my javascript. My javascript is as followed: var di

Solution 1:

The distance is available in each of the routelegs

google.maps.Distance object specification
A representation of distance as a numeric value and a display string.

Properties  Type    Description
text    string  A string representation of the distance value, using the UnitSystem specified in the request.
value   number  The distance in meters.

proof of concept fiddle

code snippet:

var geocoder;
var map;

functioninitialize() {
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('panel'));


  var een = '52.3641205';
  var twee = '4.905697000000032';
  var drie = '52.6010666';
  var vier = '4.73768229999996';

  var p1 = new google.maps.LatLng(een, twee);
  var p2 = new google.maps.LatLng(drie, vier);

  var request = {
    origin: p1,
    destination: p2,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      document.getElementById('distance').innerHTML = 'Total travel distance is: ' + (response.routes[0].legs[0].distance.value / 1000).toFixed(2) + " km";
      alert('Total travel distance is: ' + (response.routes[0].legs[0].distance.value / 1000).toFixed(2) + ' km');
      directionsDisplay.setDirections(response);

    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="distance"></div><divid="map"style="border: 2px solid #3872ac;"></div><divid="panel"></div>

Solution 2:

As per the documentation:

unitSystem

Type: UnitSystem

Preferred unit system to use when displaying distance. Defaults to the unit system used in the country of origin.

So if you want to force it to METRIC:

varrequest= {
    origin:p1,
    destination:p2,
    travelMode:google.maps.DirectionsTravelMode.DRIVING,
    unitSystem:google.maps.UnitSystem.METRIC
};

This will force the value of response.routes[0].legs[0].distance.text to use the metric system.

And as explained in @geocodezip answer, you can also rely on the response.routes[0].legs[0].distance.value which is always returned in meters, even if the country of origin uses the imperial system.

Solution 3:

You can easily get the distance by getting:

directionsDisplay.directions.routes[0].legs[0].distance.text

The result, for example, would be text like "20,5 km".

Solution 4:

In your request, set units=metric.

Then use: distance = response.routes[0].legs[0].distance.text; in your alert.