Adding a Place Autocomplete widget to your website

In this blog post, I’ll explain what Place Autocomplete does and show you how to add a Google Place Autocomplete widget to your website.

What is Google Place Autocomplete?

Google Places Autocomplete is a Google Maps API (Application Programming Interface) that helps users quickly find specific locations by suggesting relevant place names, addresses, or points of interest as they type in a search box. It’s part of the Google Places API the family of APIs which includes Nearby Search, Text Search, Place Details and Place Photos.

As users begin typing, the autocomplete feature provides a dropdown list of suggested places. These suggestions include potential matches like city names, landmarks, businesses, or addresses. Developers can further refine these suggestions by country, place type (restaurant, bar, cafe etc) or distance from a central location.

By validating what the user types with the data retrieved from the Google Maps database, Place Autocomplete both improves the user experience and reduces input errors.

How does the Place Autocomplete API work?

A call to the Place Autocomplete API looks like this:

https://maps.googleapis.com/maps/api/place/autocomplete/json

?input=input&

region=region&

types=types&

&key=YOUR_API_KEY

input (required): The text string used to generate the prediction e.g. “max …” might be what the user starts typing when trying to search for “Maxim’s Palace”, a popular Hong Kong dimsum restaurant.

region (optional): The region that you want to limit autocomplete results to e.g. if you only want to search for places in Hong Kong, you would set the region to “HK”.

types (optional): The place type that you want returned in the response e.g. “cafe” or “restaurant”.

In the response, take note of the predictions array which contains the place_id and description fields which you can use together with the Google Place Details API and Place Photos API to retrieve more information about the places returned.

{

    "predictions": [

        {

            "description": "Maxim's Palace (Central), Central",

            "place_id": "ChIJZ7kEVWEABDQRUsrU6FQ1y5E",

            "types": [

                "food",

                "point_of_interest",

                "establishment",

                "restaurant"

            ]

        }

    ]

}

Place Autocomplete Widget

The easiest way to add Place Autocomplete to your website is by using the Place Autocomplete Widget – a pre built HTML and javascript component that automatically turns any text input field into an autocomplete search bar. You only need to do two things to get the widget working.

First, import the Google Places API library:

<script src="https://maps.googleapis.com/maps/api/js?

key=YOUR_API_KEY&

libraries=places&

callback=initAutocomplete" async defer>

</script>

Next, add your text input field:

<input id="autocomplete" placeholder="Enter a place" type="text" /> 

That’s all you need to get your Autocomplete search bar working.

How much does Place Autocomplete cost?

The Place Autocomplete feature of the Google Places API uses a pay-as-you-go pricing model. Two pricing options are available: per request or per session. For applications with a large number of daily active users, session-based pricing often proves more cost-effective. For high usage volumes, you may be eligible for volume discounts by working with Google or an authorized partner. For more information, please reach out to [email protected].

Conclusion

Google Places Autocomplete API is used everywhere on the web. Its popularity is easy to explain – it simplifies the process of finding accurate location information, improves usability and reduces input errors. If you have any questions about Place Autocomplete or suggestions for topics related to the Google Maps API that you’d like us to cover, feel free to reach out to us at [email protected].