react-google-maps icon indicating copy to clipboard operation
react-google-maps copied to clipboard

Issue with using route API

Open EdwardGrasshopper opened this issue 8 months ago • 3 comments

Description

I got this error when I tried making a route from an origin to a destination. MapsRequestError: DIRECTIONS_ROUTE: REQUEST_DENIED: There was an issue performing a Directions request.

I just started to use my Google Maps API and did notice the issue located at this (https://issuetracker.google.com/issues/255359343), and I currently have my API key set to unrestricted, but I'm curious if this behavior is expected while the issue is pending?

I also got these errors too: Uncaught (in promise) MapsRequestError: DIRECTIONS_ROUTE: REQUEST_DENIED: The webpage is not allowed to use the directions service.

and

Directions Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

I can provide more info if necessary.

Steps to Reproduce

Use the useMap hook and the useMapsLibrary hook using const map = useMap(); const routesLibrary = useMapsLibrary("routes");

I followed all the general steps used in this video put out by Google Maps: https://www.youtube.com/watch?v=tFjOIZGCvuQ&list=PL2rFahu9sLJ2QuJaKKYDaJp0YqjFCDCtN&index=3

Environment

  • Library version:
  • Google maps version: weekly
  • Browser and Version:
  • OS:

Logs


EdwardGrasshopper avatar Mar 22 '25 22:03 EdwardGrasshopper

What is currently happening is that the Google Maps team is in the process of moving the Directions- and DistanceMatrix APIs into the 'legacy' state. This means that usage in new projects is discouraged (officially no longer possible, but there seems to be a way, see below), but they continue to be supported as-is for existing projects: https://developers.google.com/maps/legacy

The main takeaway here is this: While there already is the library named "routes", it doesn't use the new Routes API, but rather the Directions API, which is now in legacy. There currently is no client library for using the routes API in the browser.

So if you want to use the Routes API instead of the Directions API (and there are good reasons to), you can either call the routes API on the server and use the @googlemaps/routing package, or you have to call it via fetch on the client.

If not, you should still be able to enable the legacy directions API by using this direct link: https://console.cloud.google.com/apis/library/directions-backend.googleapis.com (however, that might just be a transitional thing that could stop working at any time).

usefulthink avatar Mar 23 '25 14:03 usefulthink

https://developers.google.com/maps/documentation/routes/migrate-routes

Is it not possible to migrate the directions API in this project to routes API?

raffidahmad avatar Apr 18 '25 16:04 raffidahmad

@raffidahmad a proper migration isn't possible at the moment, since the "directions" example uses the google.maps.DirectionsService etc, which won't function with the Routes API. I wrote a crude replacement for that in a seperate example. There will likely be a more direct integration of the Routes API in the future and we will revisit the examples then.

usefulthink avatar Apr 18 '25 17:04 usefulthink