There are multiple issues with your code
I'm not sure how you even made it work, but first of all, your waypoints
array is not how it should be formatted in relation to the documentation.
A waypoint is specified as an object literal with fields shown below:
location
specifies the location of the waypoint, as a LatLng
, as a
Place object or as a String which will be geocoded. stopover
is a
boolean which indicates that the waypoint is a stop on the route,
which has the effect of splitting the route into two routes.
Using your format gives me an error:
[
{ latitude: 40.962259, longitude: 24.506937,stopover: true },
{ latitude: 37.993381, longitude: 23.713517,stopover: true },
{ latitude: 40.936184, longitude: 24.401282,stopover: true },
]
So I fixed it following the documentation:
[
{ location: {lat: 40.962259, lng: 24.506937},stopover: true },
{ location: {lat: 37.993381, lng: 23.713517},stopover: true },
{ location: {lat: 40.936184, lng: 24.401282},stopover: true },
]
Then with this, the code works.
Then passing in the optimizeWaypoints
seems to work fine and is working as intended.
Here's a sample snippet for you to verify it yourself using some of your given locations as an example:
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -24.345, lng: 134.46 }, // Australia.
});
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
draggable: true,
map,
panel: document.getElementById("panel"),
});
directionsRenderer.addListener("directions_changed", () => {
const directions = directionsRenderer.getDirections();
if (directions) {
computeTotalDistance(directions);
}
});
displayRoute(
{lat:40.973614, lng: 24.593084},
{lat: 40.397665, lng: 23.884578},
directionsService,
directionsRenderer,
);
}
function displayRoute(origin, destination, service, display) {
service
.route({
origin: origin,
destination: destination,
// Change this to true and the Total Distance
// becomes shorter
optimizeWaypoints: false,
waypoints: [
{ location: {lat: 40.962259, lng: 24.506937},stopover: true },
{ location:{lat: 37.993381, lng: 23.713517},stopover: true },
{ location:{lat: 40.936184, lng: 24.401282},stopover: true },
],
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true,
})
.then((result) => {
display.setDirections(result);
})
.catch((e) => {
alert("Could not display directions due to: " + e);
});
}
function computeTotalDistance(result) {
let total = 0;
const myroute = result.routes[0];
if (!myroute) {
return;
}
for (let i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").innerHTML = total + " km";
}
window.initMap = initMap;
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
display: flex;
}
#sidebar {
flex-basis: 15rem;
flex-grow: 1;
padding: 1rem;
max-width: 30rem;
height: 100%;
box-sizing: border-box;
overflow: auto;
}
#map {
flex-basis: 0;
flex-grow: 4;
height: 100%;
}
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Draggable Directions</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="container">
<div id="map"></div>
<div id="sidebar">
<p>Total Distance: <span id="total"></span></p>
<div id="panel"></div>
</div>
</div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
If you try changing the optimizeWaypoints
to true
you will notice that the total distance of the path is significantly reduced. This shows that the optimizeWaypoints
is working as intended. Switching around the waypoint order does not seem to affect it.
I hope this helps!
optimizeWaypointOrder
, notoptimizeWaypoints