0

I'd like to send requests against the Google Directions API. Google provides a Node.JS client library for the API. However, this AP is server-side only. Attempting to use it from a browser script results in a CORS failure. Multiple past answers (such as this one) indicate that this library simply can't be used in this way.

The alternative is to use the client-side JavaScript API. However, this requires adding a <script> tag to the document root. That's the wrong level of abstraction for my needs. I'd like to use a method from a library or dot-js file instead.

Following the advice given here, I'd like to ask: is there a module available through npm I can use to query the Google Directions API client-side?

Aleksey Bilogur
  • 3,686
  • 3
  • 30
  • 57
  • Possible duplicate of https://stackoverflow.com/questions/44804429/google-maps-api-get-directions-not-passing-full-link-and-no-access-control-all/44845489#44845489 – xomena Feb 20 '18 at 22:56
  • Duplicate of https://stackoverflow.com/questions/46896362/how-to-install-google-maps-through-npm – Javier Brea Nov 14 '20 at 09:22
  • The @googlemaps/js-api-loader package can be used to load the library dynamically. – Justin Poehnelt May 21 '21 at 15:24

2 Answers2

2

It's not naively possible to access the Google Maps Directions API from the client side. Web browsers implement the Single-Origin Policy, which requires that any requests to a domain come from the same domain. Requires between domains are disallowed by default. Cross-domain requests can be enabled at the server lever by setting the right CORS headers on the endpoint, but the Google Maps servers choose not to do this.

There are two ways of working around this. One is to wrap the request using the Google API Auth library. However, I could not get this to work.

What did work was using a reverse proxy. This workaround is actually mentioned in the Google Directions API intro page (albeit obliquely). You will need to set up a server which forwards any requests to an API request, then returns that API request to the original requester. Since this is now a server-side request, SOP will not apply, and you will be good to go.

For an example implementation check out this repository on GitHub.

Aleksey Bilogur
  • 3,686
  • 3
  • 30
  • 57
0

https://developers.google.com/maps/documentation/directions

This is the Directions API web service. It does not require adding a <script> tag.

You can make direct requests to the service as per the example:

https://maps.googleapis.com/maps/api/directions/json?origin=75+9th+Ave+New+York,+NY&destination=MetLife+Stadium+1+MetLife+Stadium+Dr+East+Rutherford,+NJ+07073&key=YOUR_API_KEY

once you have generated an API key and replaced YOUR_API_KEY in the request with your own key.

MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
  • Does this mean that the Google-published NPM client hits a different endpoint? – Aleksey Bilogur Feb 14 '18 at 16:28
  • I don't work with NodeJS or React so I can't really help you further, and there is a chance I misunderstood your question... But looking at the [code](https://github.com/googlemaps/google-maps-services-js/blob/master/lib/apis/directions.js) of the client library you mentioned, you can tell the endpoint is identical to the web service one. – MrUpsidown Feb 14 '18 at 17:24
  • After testing, these instructions are correct for accessing the data server-side (e.g. out of an NPM script), but they won't work client-side (e.g. by making a request in JavaScript), so they don't solve my problem unfortunately! – Aleksey Bilogur Feb 16 '18 at 02:50
  • See the other answer https://stackoverflow.com/a/48876011/3145360 as to why this does not work. – Justin Poehnelt May 21 '21 at 15:23