Google Maps API; "CORS Header ‘Access-Control-Allow-Origin’ Missing" Error

I'm trying to calculate the estimated travel time between two places, with the Google Maps API. I am asking for the data in the following way: const Url = 'https://maps.googleapis.

Solution 1:

You are using Distance Matrix Service on client side. But the manner you trying to access the API is not supported for client(browser)-site and it will not work reliably.

Good that there is a library for your use-case: Here's the guide for the Distance Matrix Service on client side. And here's a vanilla-js example Check it out.

Maybe this snippet will help you:

const matrix = new google.maps.DistanceMatrixService();

matrix.getDistanceMatrix({
  origins: [new google.maps.LatLng(25.7694708, -80.259947)],
  destinations: [new google.maps.LatLng(25.768915, -80.254659)],
  travelMode: google.maps.TravelMode.DRIVING,
}, function(response, status) {
  //do something
});