1

I'm implementing a Google Places Autocomplete dropdown, but need to do the api communication on the server as to not expose the API key (project requirement). The querying and returning of suggested addresses from my server to the client is done and working. Now I just need to build the dropdown with the data.

Implementing the autocomplete dropdown widget is fairly simple using the places javascript library (new google.maps.places.Autocomplete(elem)), but is there a low effort way of doing it when you're not using that library? Or is there a way of using that library without exposing your api key?

evan
  • 5,443
  • 2
  • 11
  • 20
Brent
  • 501
  • 3
  • 13

1 Answers1

1

If you need to implement Place Autocomplete in client-side JavaScript then you should use the client-side library. Otherwise you'll run into a bunch of issues such as CORS errors.

If what you're worried about is exposing the API key, then note that there's no need to because the key can (and should) be restricted with HTTP referrers. As long as it's restricted, it cannot be used from third-party domains. To learn more about API key restrictions check out Google's documentation.

Hope this helps!

evan
  • 5,443
  • 2
  • 11
  • 20
  • Thanks, I'll see if that changes the product owner's mind any on implementing it in javascript if we run any issues with my current implementation. In the interim I implemented it using the jQuery UI autocomplete widget and api communication happening between my server and google. I didn't have any CORS issues with making requests to the autocomplete api web service from the backend code. – Brent May 10 '20 at 20:57
  • Nice :). Note that jQuery UI is not using Maps Place Autocomplete. And you can definitely use the Places Autocomplete [web service](https://developers.google.com/places/web-service/autocomplete) without problem in your back-end. What I meant is that using the web service in client-side JS is gonna cause problems like [these](https://stackoverflow.com/questions/42180788/how-to-use-cors-to-implement-javascript-google-places-api-request), which is what the [client-side](https://developers.google.com/maps/documentation/javascript/places-autocomplete) Autocomplete service is for. – evan May 12 '20 at 07:33