Thursday, May 10, 2012

Faster address entry with Google Places Autocomplete

How often do you find yourself filling in an online form that looks something like this?


Be it a shipping address for an online order, a credit card billing address, or booking a taxi, address entry forms are ubiquitous online. And every time I have to fill one in it drives me crazy. Why? Because I know there is a much better way...

Google Places Autocomplete is a feature of the Google Places API and the places library of the Google Maps API v3. It provides your applications with the type-ahead-search behaviour of the Google Maps search field. You only have to start typing an address, and Autocomplete can fill in the rest.

By default, Autocomplete will give you the full address as a single line of text, but we know that there are many times where you need the address in structured format, such as an address entry form. Fortunately you can also retrieve the full details for each completion, which includes the structured address, using either the Autocomplete.getPlace() method of the Maps API, or using the Places API Details service.

You can also provide Autocomplete with a hint as to the approximate location or area you want to favour in the completions. By sourcing that location hint using W3C Geolocation and filling in the structured address from the Place details, you can easily build a far better address entry experience for your users:



There isn’t a single address entry form on Earth that could not be improved by using Google Places Autocomplete. If you want to serve your users with the best possible experience it’s essential!

But there’s more...

We recently launched two new features of Autocomplete that make it even more compelling!

Country restricts
We understand that many web sites know that all of their users are located in a single country. For example if a U.S. based online retailer ships only to U.S. addresses, there is no need for Autocomplete to offer completions for addresses outside of the U.S. We have therefore launched country filtering, which allows you to constrain the completions to a specific country.
City and region type filters
We also recognise that many applications prompt users to enter a location that is not as fine grained as an exact street address. I you are booking a hotel or browsing for real estate you are often prompted to enter the city or zipcode you are interested in. To address this need we have introduced additional type filters that allow you to limit completions to only cities, or to only coarse grained features such as zipcodes, states, and countries.
To illustrate these new features the following application implements a basic hotel finder that uses Autocomplete to provide city only completions in the specified country, and then uses Place Searches to find nearby hotels:



The simplest way to use Places Autocomplete in your web based applications is to use the places library of the Google Maps API v3. This makes it easy to attach autocomplete behaviour to an existing text field on your web site. However if you are building a native mobile app don’t despair! Autocomplete is also offered as part of the Google Places API web service.

You are free to use Autocomplete in any application, even if you are not displaying a map. All we ask is that you display the ‘powered by Google’ logo under the text field when you use Autocomplete without a map, as illustrated in the address entry example above. Sample logos suitable for use on white or color backgrounds, and for a variety of devices and screens are available here.

Google Places Autocomplete makes it easy for you to add that little bit of magic to your apps that shows your users that you care about their experience and time. What are you waiting for? Hunt down all those address and location fields in your apps now and make them shine with Google Places Autocomplete!


P.S. If you stumble across a site that would clearly also benefit from Autocomplete, why not let them know? You’ll be making the web better for us all, and saving my sanity at the same time...