0

The following code that I found (Google map direction services waypoints more than 50) marks different routes to follow on a journey. I need help to know the total distance of all marked routes since I don't know how to apply it to this code. operation is very similar to that of bus stops. (The code does not create efficient routes, it only marks the route to get between different stops as Google does with a maximum of 6 stops, it would also help me to list each point or add a small text to each one)

function initMap() {
    var service = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'));

    // list of points
    var stations = [
        {lat: 48.9812840, lng: 21.2171920, name: 'Station 1'},
        {lat: 48.9832841, lng: 21.2176398, name: 'Station 2'},
        {lat: 48.9856443, lng: 21.2209088, name: 'Station 3'},
        {lat: 48.9861461, lng: 21.2261563, name: 'Station 4'},
        {lat: 48.9874682, lng: 21.2294855, name: 'Station 5'},
        {lat: 48.9909244, lng: 21.2295512, name: 'Station 6'},
        {lat: 48.9928871, lng: 21.2292352, name: 'Station 7'},
        {lat: 48.9921334, lng: 21.2246742, name: 'Station 8'},
        {lat: 48.9943196, lng: 21.2234792, name: 'Station 9'},
        {lat: 48.9966345, lng: 21.2221262, name: 'Station 10'},
        {lat: 48.9981191, lng: 21.2271386, name: 'Station 11'},
        {lat: 49.0009168, lng: 21.2359527, name: 'Station 12'},
        {lat: 49.0017950, lng: 21.2392890, name: 'Station 13'},
        {lat: 48.9991912, lng: 21.2398272, name: 'Station 14'},
        {lat: 48.9959850, lng: 21.2418410, name: 'Station 15'},
        {lat: 48.9931772, lng: 21.2453901, name: 'Station 16'},
        {lat: 48.9963512, lng: 21.2525850, name: 'Station 17'},
        {lat: 48.9985134, lng: 21.2508423, name: 'Station 18'},
        {lat: 49.0085000, lng: 21.2508000, name: 'Station 19'},
        {lat: 49.0093000, lng: 21.2528000, name: 'Station 20'},
        {lat: 49.0103000, lng: 21.2560000, name: 'Station 21'},
        {lat: 49.0112000, lng: 21.2590000, name: 'Station 22'},
        {lat: 49.0124000, lng: 21.2620000, name: 'Station 23'},
        {lat: 49.0135000, lng: 21.2650000, name: 'Station 24'},
        {lat: 49.0149000, lng: 21.2680000, name: 'Station 25'},
        {lat: 49.0171000, lng: 21.2710000, name: 'Station 26'},
        {lat: 49.0198000, lng: 21.2740000, name: 'Station 27'},
        {lat: 49.0305000, lng: 21.3000000, name: 'Station 28'},
    ];
    
    // Zoom and center map automatically by stations (each station will be in visible map area)
    var lngs = stations.map(function(station) { return station.lng; });
    var lats = stations.map(function(station) { return station.lat; });
    map.fitBounds({
        west: Math.min.apply(null, lngs),
        east: Math.max.apply(null, lngs),
        north: Math.min.apply(null, lats),
        south: Math.max.apply(null, lats),
    });
    
    // Show stations on the map as markers
    for (var i = 0; i < stations.length; i++) {
        if (!stations[i].name)
            continue;
        new google.maps.Marker({
            position: stations[i],
            map: map,
            title: stations[i].name
        });
    }

    // Divide route to several parts because max stations limit is 25 (23 waypoints + 1 origin + 1 destination)
    for (var i = 0, parts = [], max = 8 - 1; i < stations.length; i = i + max)
        parts.push(stations.slice(i, i + max + 1));

    // Callback function to process service results
    var service_callback = function(response, status) {
        if (status != 'OK') {
            console.log('Directions request failed due to ' + status);
            return;
        }
        var renderer = new google.maps.DirectionsRenderer;
        renderer.setMap(map);
        renderer.setOptions({ suppressMarkers: true, preserveViewport: true });
        renderer.setDirections(response);
    };
        
    // Send requests to service to get route (for stations count <= 25 only one request will be sent)
    for (var i = 0; i < parts.length; i++) {
        // Waypoints does not include first station (origin) and last station (destination)
        var waypoints = [];
        for (var j = 1; j < parts[i].length - 1; j++)
            waypoints.push({location: parts[i][j], stopover: false});
        // Service options
        var service_options = {
            origin: parts[i][0],
            destination: parts[i][parts[i].length - 1],
            waypoints: waypoints,
            travelMode: 'WALKING'
        };
        // Send request
        service.route(service_options, service_callback);
    }
  }
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;     
    width: 100%;
    height: 100%;
}
<div id="map"></div>

<!-- without API KEY set variable "max" to 8 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<!-- with API KEY set variable "max" to 25 -->
<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY"></script>-->
geocodezip
  • 158,664
  • 13
  • 220
  • 245
Cristian Eraso
  • 9
  • 3

2 Answers2

1

You need to get the distance of each piece of the route and add them up.

Related question: How to calculate total distance and time (getDistanceMatrix)

Function from the answer to that question, slightly modified for your functionality:

var totalDistance = 0;
function computeTotalDistance(result) {
  var totalDist = 0;
  var totalTime = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i++) {
    totalDist += myroute.legs[i].distance.value;
    totalTime += myroute.legs[i].duration.value;
  }
  totalDistance += totalDist
  document.getElementById("dvDistance").innerHTML = "total distance is: " + (totalDistance / 1000).toFixed(2) + " km";
}

Call that on each result from the directions service.

// Callback function to process service results
var service_callback = function(response, status) {
  if (status != 'OK') {
    console.log('Directions request failed due to ' + status);
    return;
  }
  var renderer = new google.maps.DirectionsRenderer;
  renderer.setMap(map);
  renderer.setOptions({
    suppressMarkers: true,
    preserveViewport: true
  });
  renderer.setDirections(response);
  computeTotalDistance(response);  // <============ here
};

screenshot of resulting map

function initMap() {
  var service = new google.maps.DirectionsService;
  var map = new google.maps.Map(document.getElementById('map'));
  var totalDistance = 0;

  // list of points
  var stations = [
        {lat: 48.9812840, lng: 21.2171920, name: 'Station 1'},
        {lat: 48.9832841, lng: 21.2176398, name: 'Station 2'},
        {lat: 48.9856443, lng: 21.2209088, name: 'Station 3'},
        {lat: 48.9861461, lng: 21.2261563, name: 'Station 4'},
        {lat: 48.9874682, lng: 21.2294855, name: 'Station 5'},
        {lat: 48.9909244, lng: 21.2295512, name: 'Station 6'},
        {lat: 48.9928871, lng: 21.2292352, name: 'Station 7'},
        {lat: 48.9921334, lng: 21.2246742, name: 'Station 8'},
        {lat: 48.9943196, lng: 21.2234792, name: 'Station 9'},
        {lat: 48.9966345, lng: 21.2221262, name: 'Station 10'},
        {lat: 48.9981191, lng: 21.2271386, name: 'Station 11'},
        {lat: 49.0009168, lng: 21.2359527, name: 'Station 12'},
        {lat: 49.0017950, lng: 21.2392890, name: 'Station 13'},
        {lat: 48.9991912, lng: 21.2398272, name: 'Station 14'},
        {lat: 48.9959850, lng: 21.2418410, name: 'Station 15'},
        {lat: 48.9931772, lng: 21.2453901, name: 'Station 16'},
        {lat: 48.9963512, lng: 21.2525850, name: 'Station 17'},
        {lat: 48.9985134, lng: 21.2508423, name: 'Station 18'},
        {lat: 49.0085000, lng: 21.2508000, name: 'Station 19'},
        {lat: 49.0093000, lng: 21.2528000, name: 'Station 20'},
        {lat: 49.0103000, lng: 21.2560000, name: 'Station 21'},
        {lat: 49.0112000, lng: 21.2590000, name: 'Station 22'},
        {lat: 49.0124000, lng: 21.2620000, name: 'Station 23'},
        {lat: 49.0135000, lng: 21.2650000, name: 'Station 24'},
        {lat: 49.0149000, lng: 21.2680000, name: 'Station 25'},
        {lat: 49.0171000, lng: 21.2710000, name: 'Station 26'},
        {lat: 49.0198000, lng: 21.2740000, name: 'Station 27'},
        {lat: 49.0305000, lng: 21.3000000, name: 'Station 28'},
    ];

  // Zoom and center map automatically by stations (each station will be in visible map area)
  var lngs = stations.map(function(station) {
    return station.lng;
  });
  var lats = stations.map(function(station) {
    return station.lat;
  });
  map.fitBounds({
    west: Math.min.apply(null, lngs),
    east: Math.max.apply(null, lngs),
    north: Math.min.apply(null, lats),
    south: Math.max.apply(null, lats),
  });

  // Show stations on the map as markers
  for (var i = 0; i < stations.length; i++) {
    if (!stations[i].name)
      continue;
    new google.maps.Marker({
      position: stations[i],
      map: map,
      title: stations[i].name
    });
  }

  // Divide route to several parts because max stations limit is 25 (23 waypoints + 1 origin + 1 destination)
  for (var i = 0, parts = [], max = 8 - 1; i < stations.length; i = i + max)
    parts.push(stations.slice(i, i + max + 1));

  // Callback function to process service results
  var service_callback = function(response, status) {
    if (status != 'OK') {
      console.log('Directions request failed due to ' + status);
      return;
    }
    var renderer = new google.maps.DirectionsRenderer;
    renderer.setMap(map);
    renderer.setOptions({
      suppressMarkers: true,
      preserveViewport: true
    });
    renderer.setDirections(response);
    computeTotalDistance(response);
  };

  // Send requests to service to get route (for stations count <= 25 only one request will be sent)
  for (var i = 0; i < parts.length; i++) {
    // Waypoints does not include first station (origin) and last station (destination)
    var waypoints = [];
    for (var j = 1; j < parts[i].length - 1; j++)
      waypoints.push({
        location: parts[i][j],
        stopover: false
      });
    // Service options
    var service_options = {
      origin: parts[i][0],
      destination: parts[i][parts[i].length - 1],
      waypoints: waypoints,
      travelMode: 'WALKING'
    };
    // Send request
    service.route(service_options, service_callback);
  }

  function computeTotalDistance(result) {
    var totalDist = 0;
    var totalTime = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
      totalDist += myroute.legs[i].distance.value;
      totalTime += myroute.legs[i].duration.value;
    }
    totalDistance += totalDist
    // totalDist = totalDist / 1000.
    document.getElementById("dvDistance").innerHTML = "total distance is: " + (totalDistance / 1000).toFixed(2) + " km";
  }
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 90%;
  width: 100%;
}
<div id="dvDistance"></div>
<div id="map"></div>

<!-- without API KEY set variable "max" to 8 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
geocodezip
  • 158,664
  • 13
  • 220
  • 245
0

Function from the answer to that question, slightly modified for your functionality:

<script >

  const route = response.routes[0];
  var METERS_TO_MILES = 0.000621371192;
  var totalDist = 0;
  var totalTime = 0;

  for (let i = 0; i < route.legs.length; i++) 
  {
      totalDist += route.legs[i].distance.value;
      totalTime += route.legs[i].duration.value;
  }

 totalDist = Math.round( totalDist * METERS_TO_MILES * 10 ) / 10;
                    document.getElementById("totalDistance").innerHTML =
                    "Total distance is: " + totalDist +" miles";
 document.getElementById("totalTime").innerHTML = 
 "Total time is: " + (totalTime / 60).toFixed(2) + " minutes";

</script>
Lahiru Prabodha
  • 9
  • 5