Today, making a user input an entire address is considered a sign of a poor user experience. That’s why location-based applications need autocomplete services. Place Autocomplete is one such service for web applications that use Google Maps.
In this article, we discuss key features of the Places API Autocomplete service. We also explain how to implement address autocomplete using this Google API.
This article will be helpful for anyone interested in building location-aware web applications.
Place Autocomplete is part of the Places API. It implements type-ahead search for Google Maps in web applications. The Places API processes user queries as they’re typed and returns on-the-fly predictions. This allows a user to quickly choose an address from a list of predictions instead of typing it in full.
Autocomplete matches user queries with:
- Full words
- Place names
- Plus Codes
Implementing an address autocomplete feature using this Google API is beneficial for both businesses and end users for several reasons:
The ability to search for a particular address or location is an integral part of any location-aware application. Here are several examples of businesses that can benefit from adding the Places API to their web solutions:
Type of service
Role of the Places API
Door-to-door and last-mile delivery
Local business catalogs
Next, let’s take a look at key implementation options for the Places API.
The Places API is available for desktop, Android, and iOS, so you can use it not only for web applications but also for mobile and cross-platform solutions. No matter your choice of platform, there are two ways to implement the Places API on the client side:
- Using the Autocomplete widget, which automatically provides address predictions as a user types a request. When the user chooses a predicted address, the widget fetches additional information about it (coordinates, exact address, place name, etc.). This implementation of the Places API is the most convenient for users, since they don’t have to type a complete search request. Also, the dropdown list with predictions is implemented and styled by Google, which means less work for a developer.
To interact with the server side of your application fast and easily, you can use one of the client libraries for Google Maps web services. Google provides libraries for Java, Python, Go, Node.js, and Objective-C, each with Places API functionality.
If you need an application that searches for a particular type of location, use these Places API parameters to configure search results:
- Component restrictions — Restricts search results to specific areas (country, city, place ID, etc.).
- Bounds — Defines the preferred area for results but doesn’t limit them to this area.
- Types — Sets prediction types (geocode, address, name of the establishment, etc.) that should be returned to the user.
- Fields — Specifies data fields that should be included in the search results.
This knowledge of Places API Autocomplete is enough to implement it in an existing application. Let’s move to the practical part and build a simple web app with an address finder using this Google API.
Once you get your API key, you can start building a simple application with Place Autocomplete. In the following example, we’ll show how to implement the Autocomplete widget.
We’ll create an application that allows a user to input part of an address, select a prediction, and get information about the address on the screen. The application will also show the requested address on the map.
The HTML for this application will be pretty simple:
Now we need to include Place Autocomplete libraries (which are an integral part of the API) into the app. Here’s how we do it:
You’ll need to replace the
key=YOUR_KEY parameter with the API key you received previously. Note that the
library=places parameter we specified above limits our app’s access to Places API libraries only.
When we use the Autocomplete widget, we should create a listener for the
place_changed event. When a user clicks on a prediction, the widget triggers this event. We need to handle this event and request details on the selected location by adding the following method to the code
With this step completed, our API should start working and processing user queries. When a user requests an address, the application will locate it on the map and show additional information on everything located at this address.
As an example, let’s search for the Museum of Modern Art in San Francisco. Just start typing its address (151 Third Street, San Francisco) into the address field. You’ll see suggestions provided by the Places API:
Click on the correct suggestion to fill the address form. Below, you can see an example of the response:
On the client side, the results of the search will look like this:
If the user sees search predictions and the correct search result, that means Place Autocomplete is working properly.
Autocomplete features provide users with on-the-fly predictions and simplify the search process. That’s why a carefully configured and implemented autocomplete feature for address search is a must for any location-aware application. Following the advice provided above, you can successfully implement search autocomplete with the Google Places API.
At Apriorit, we make sure that each application made by our web development experts is easy to use, well-tuned, and tailored to the customer’s needs. If you’re working on a web project and are in need of a professional team, don’t hesitate to contact us!