Google Places API → Add Autocomplete To An Input Field

By the end of this tutorial, you’ll be able to:

• Know what Autocomplete is
• Instantiate Autocomplete
• Restrict Suggested Addresses to a Specific Region
• Change the Drop-down List Style

What is Autocomplete?

Autocomplete is a part of Google’s Places Library in the Google Map Javascript API.

We are going to discuss how to use autocomplete API to show suggested addresses in a dropdown list when users start typing their addresses in the input field.

This is very useful when a user denies sharing his or her location accidentally or when the HTML Geolocation API does not support their browser. We can easily get this functionality working using autocomplete.

The first thing we need to do is include Google Places Library inside the index.html file before the ending body tag.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>

⚠️ Make sure to add your API Key in the URL
Google Maps API → Obtain An API Key