Currently, I am utilizing Google services for calculating map routes within my application. The specific code I am using is as follows:
const directionsService = new google.maps.DirectionsService();
directionsService.route(route, (data, status) => {
if (status === 'OK') {
this.storage.routeValue = data.routes[0].legs[0].duration.value;
}
});
As I pass the data to this service from various pages, it computes the route based on the data provided and returns it back accordingly. However, a challenge arises when I have other functions running concurrently on my current page where local values are being altered by variables. For instance:
//This invokes the above code and sends data from my page to the service:
this.googledirectionsService.route(data);
///Subsequently, I have:
this.isStarted = true;
this.map.showPath();
Essentially, I trigger another function which modifies a local variable afterwards. But the dilemma lies in not knowing when or if the other service has completed its task. How can I enhance this code? Would using observables be a suitable solution? I need a way to determine if and when the googledirectionsService process is finalized before proceeding with the remaining code on my current page. One potential approach could involve adding a public variable within the route callback of the service, then checking its status in my current page. However, since the processing time may vary depending on factors like incorrect data input, it’s crucial to first ascertain the result from the service before proceeding with subsequent code execution.