I am attempting to retrieve the waypoints from an AXIOS call and utilize the response to populate the city into a waypts array. Unfortunately, when I try to include the waypoints in the route, the map only shows the route from the starting point to the destination without displaying any waypoints. The console does not show any waypoints being requested. Manually adding the waypoints results in their appearance on the map. Checking the console log reveals that waypts is appropriately formatted for the waypoints field in the route. Additionally, the filterselect within the initMap() function pertains to a dropdown in the vue component's template containing all the route IDs.
overview.js
function calculateAndDisplayRoute(context, directionsService, directionsDisplay) {
var origin, dest;
var waypts = [];
var stops;
for (var i=0; i < context.routes.length; i++) {
if(context.routes[i].id == context.filter){
origin = context.routes[i].start;
dest = context.routes[i].dest;
stops = Promise.resolve(getAllStops(context.routes[i].id));
stops.then(function(value) {
for (var i = 0; i < value.length; i++) {
if(!(value[i].city === dest)){
waypts.push({
location: value[i].city.toString(),
stopover: true
});
}
}
})
break;
}
}
console.log(waypts)
directionsService.route({
origin: origin,
destination: dest,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
console.log(response)
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
async function getAllStops(routeid){
var stops=[];
var thisResponse =[];
try{
let response = await AXIOS.get('/api/route/getStops/' + routeid + '/', {}, {});
thisResponse = response.data;
for (var i = 0; i < thisResponse.length; i++) {
stops.push(response.data[i]);
}
}catch(error){
console.log(error.message);
}
return stops;
}
//...
methods: {
initMap: function(){
this.$nextTick(function(){
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.49, lng: -73.61},
zoom: 9
});
directionsDisplay.setMap(map);
var thisContext = this;
var onChangeHandler = function() {
calculateAndDisplayRoute(thisContext, directionsService, directionsDisplay);
};
document.getElementById('filterselect').addEventListener('change', onChangeHandler);
})
}
}
Console log (waypts, then response) for route 83 https://i.sstatic.net/cfroz.png
AXIOS Response for routeid 83
[{"locationId":84,"city":"Johannesburg","street":"28th","user":{"ratings":[4.5,4.8,4.1,2.8],"username":"elle12","password":"****","firstName":"Elle","lastName":"Woods","phoneNumber":"**********","city":"Cape Town","address":"*** Trinidad","avgRating":4.05,"numTrips":4,"role":"passenger","car":null,"status":"Active","request":null},"route":{"routeId":83,"seatsAvailable":1,"startLocation":"Cape Town","date":"2018-12-04T15:00:00.000+0000","car":{"vehicleId":81,"brand":"Tesla","model":"X","licensePlate":"123456","driver":{"ratings":[4.0],"username":"nono12","password":"****","firstName":"Noam","lastName":"Suissa","phoneNumber":"**********","city":"Montreal","address":"345 road","avgRating":4.0,"numTrips":1,"role":"driver","car":null,"status":"Active","request":null},"route":null},"status":"Scheduled","stops":null},"price":13.0},
{"locationId":85,"city":"Hoedspruit","street":"Kruger","user":{"ratings":[2.8],"username":"george12","password":"****","firstName":"George","lastName":"Lasry","phoneNumber":"**********","city":"Johannesburg","address":"*** Hamt","avgRating":2.8,"numTrips":1,"role":"passenger","car":null,"status":"Inactive","request":null},"route":{"routeId":83,"seatsAvailable":1,"startLocation":"Cape Town","date":"2018-12-04T15:00:00.000+0000","car":{"vehicleId":81,"brand":"Tesla","model":"X","licensePlate":"123456","driver":{"ratings":[4.0],"username":"nono12","password":"****","firstName":"Noam","lastName":"Suissa","phoneNumber":"**********","city":"Montreal","address":"345 road","avgRating":4.0,"numTrips":1,"role":"driver","car":null,"status":"Active","request":null},"route":null},"status":"Scheduled","stops":null},"price":11.0}]