Location autocomplete inputs are everywhere, but they aren’t as trivial to implement as one would expect. Yes, there are tons of npm packages out there, but most of them are poorly maintained or not allowing enough customization. If you’re a developer working in a professional project, you’re better off building the logic yourself and leveraging your UI library of choice to style the input and the suggestions.
Google Cloud offers a ton of APIs, including ones that you can use for address autocompletion. Let’s set up a Google Cloud project and make a React component, step by step, to obtain something like this:
What Google APIs to use?
It’s not straightforward, so let’s summarize it here:
The Google Maps JavaScript API needs to be enabled in order to make API requests from a browser.
The Google Places API is actually the one we need, using it for the Autocomplete Service and the Places Service.
The Autocomplete Service provides predictions for what the user is looking for based on an incomplete input, like “Pizzeria Lu” when trying to find Pizzeria Lugano. It doesn’t provide any details about the place, except its complete address and it’s Google Place ID.
The Places Service returns detailed information about a place.
The implementation performs the following:
When the user is typing, we use the Autocomplete Service to obtain suggestions.
When the user selects a suggestion, we use the Places Service to get the place detailed information, like address, coordinates, and many other possible fields.
Are there alternative APIs that offer this service?
Mapbox is one of my favorite products, and I always try to use it before resorting to Google. However, in recent projects, I needed to obtain the place’s time zone, and Mapbox doesn’t have an API to return this information. Google does, the Time Zone API, and so I prefer to use as few 3rd party APIs as possible in a project to keep things simple.
Steps to implement a React input with location autocomplete
We only need those 2 APIs, so let’s be minimalistic and mitigate risks by enabling only those.
To do it in a way that it doesn’t enable all the other Google Maps APIs, go to APIs & Services > Library:
Then search for the Maps JavaScript API:
Select it, and then click “Enable”.
It’ll prompt you to create a billing profile if you haven’t already. The Maps APIs require having billing configured.
Then repeat the process for the Places API.
3. Set up a restricted access token
Go to APIs & Services > Credentials
You might have an access token already there, created when you enabled the APIs. If so, you can open it to edit it. Otherwise, you can create a new one.
Under “Set an application restriction”, select Website and then configure the domains that you’re expecting to use. You can always modify this later if you don’t know yet.
Remember that you can use asterisks for wildcards, and that you should have a different access token for each environment (local dev, staging, production). For the sake of my example, since it’s a demo project, I only did one token.
Also, restrict the key to use only the Maps JavaScript API and the Places API.
4. Copy the access token to your React project
Copy the API key value, and paste it in the environment of your React project. How you do it depends on your setup or framework.
5. Create the React component
An autofill input is just an input with a popover showing suggestions. If you’re lucky that the UI library you’re using has it included out of the box (e.g., Material UI Autocomplete), great! If not, then you’ll have to make it yourself.
The structure of the component would be as follows.
6. Dynamically load the Maps JavaScript API as a package
Bonus: save the Place ID to make links to Google Maps totally accurate
If you’re using the location data to show a link to Google Maps, then save the place_id field. This will enable you to make a link that opens directly the place they selected. It’s more reliable than a URL to Google Maps with only query.