how to set waypoint itinerary with google maps and ionic - google-maps

Question

I need to display a map on the screen, where there is an itinerary of the places I need to go.
I need it to be displayed in sequence, and for the map to show me the full route of the places I need to go in sequence.
I know that markers can be created, but I would like to create points on the map in sequence starting from a starting location and an ending location, there may be multiple locations but I want the map to trace the full route between the locations in the visit sequence.
I didn't find anything that would allow me to do this in the Google Maps API documentation, is it possible to do this?

Answer 1

In this example, i've done 2 waypoints that the map need to go, and then render the map with those, solving TSP problem (Travelling salesman problem)
loadMap(){
// create a new map by passing HTMLElement
let mapEle: HTMLElement = document.getElementById('map_canvas');
let directionsService = new google.maps.DirectionsService();
let directionsDisplay = new google.maps.DirectionsRenderer();
// create map
this.map = new google.maps.Map(mapEle, {
center: this.start,
zoom: 13
});
directionsDisplay.setMap(this.map);
var request = {
origin:{lat: -34.6496604, lng: -58.4047352},
destination:{lat: -34.650078, lng: -58.402425},
waypoints: //your array of waypoints, example [{
location:{lat: -34.597353,lng: -58.415832},
stopover: true
},
{
location:{lat: -34.608441,lng: -58.406194},
stopover: true
}],
optimizeWaypoints:true,
provideRouteAlternatives: false,
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
}
});
}
Solved with Javascript API from google maps, for further information check : https://developers.google.com/maps/documentation/javascript/directions