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

Make sure that Maps JavaScript API and Places API libraries are enabled in the Google Cloud Console.

As you can see, the URL is generic and I’ve added two query parameters at the end.

• key: Your API Key from Google Cloud Platform. Find how to get it here.

• libraries: The value of this will be the library name that we want to use, in this case places.

Instantiate Autocomplete

The next thing we want to do is instantiate the autocomplete object.

new google.maps.places.Autocomplete();

It will take a few parameters.

The main one is the input DOM element that we want to add the auto complete functionality into.

To do that, set a id attribute called autocomplete to the input field:

<input
    type="text"
    placeholder="Enter your address"
    id="autocomplete"
/>

Then inside the parenthesis, add the input DOM element as a first argument.

  new google.maps.places.Autocomplete(
      document.getElementById("autocomplete");
  );

🔥 Recommended
Vue.js + Google Maps API for Beginners Video Course

Restrict Suggested Addresses to a Specific Region

Let’s see how we can show addresses from a specific region close to a user’s location so that it’s easy to find his or her address with minimal typing.

For example, I live in Canada and when I type 1 2 3 the suggested addresses are from the U.S. and Taiwan.

I can still get my address but it takes longer.

Let’s say I want to show Ottawa street addresses first before showing suggestions from other cities or countries.

To do that, we need to have the geographic coordinates of the city, in this case, Ottawa. You can find that information by doing a simple search like Ottawa Ontario Geographic Coordinates… and there it is.

This is actually DD coordinates (decimal degree). What we want are simple standard coordinates.

Click the first link, and the simple standard is the first option.

Now that we have the coordinates, to add them into the Autocomplete object we need to pass a Javascript object as a second argument.

After the comma, create a Javascript object and define a property called bounds inside it. Set its value to a LatLng object passing Ottawa coordinate values as arguments to it.

new google.maps.places.Autocomplete(
   document.getElementById("autocomplete"), {
      bounds: new google.maps.LatLngBounds(45.4215296, -75.6971931)
   }
)

As you can see, it shows all of the Ottawa addresses first followed by other matching addresses.

Change Drop-down List Style

Let’s change some of the style of the dropdown list to match our theme.

This image shows what CSS classes we need in order to change the list style.

First, get rid of the icon on the left side of each address which is the .pac-icon class.

Inside the .pac-icon class, add display: none; to hide that.

<style>
.pac-icon {
  display: none;
}
</style>

Let’s increase the padding for each item. The target CSS class for that would be pac-item. Give padding of 10 pixels to all sides.

Then, increase the font size of the text to 16 pixels and let’s change the cursor to a pointer (which is the hand symbol).

Finally, give a hover state for the pac item class with a grey background color.

.pac-item {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.pac-item:hover {
  background-color: #ececec;
}

Let’s look at the changes we made.

That looks better.

As you can see, the city, province and the country has a larger font size as expected, but the actual street name did not change.

To change the street name font size we need to use another CSS class named pac-item-query.

.pac-item-query {
  font-size: 16px;
}

Let’s try it one more time and it looks great!

If you want to know more about Google Maps API, check out my course Vue.js + Google Maps API for Beginner.

This will teach you everything you need to know to build location-based apps like a PRO!