Map Tips: Get started with autocomplete


Editor’s note: ‘Map Tips’ are designed to answer frequently asked questions about Google Maps APIs. For important tips on how to deploy Google’s mapping tools, read more from David McClusky, Google Maps Solutions Architect at Google.

One of the most familiar features of Google Maps is autocomplete, Google’s ‘type ahead’ functionality. Autocomplete reduces errors in entries and provides a better search experience for the user. This functionality is included in both our web and mobile Google Places API libraries, however many developers tend to overlook it when building their own mapping applications.
You can greatly enhance your application’s user experience by providing Autocomplete functionality for both address input, points of interest, and search terms. The Google Places Autocomplete API is available in the Places Javascript API, as a web service, in the Places API for Android, and coming soon in the Places API for iOS.

Here are some easy steps to help you get started with Autocomplete on your website, using the Javascript version of the Places API.

Step 1 - You need to specifically include the Places library when loading the Google Maps Javascript API. To do this, you will need to load the Google Places library using the libraries parameter in the bootstrap URL for the Google Maps JavaScript API. Be sure to replace API_KEY in the example with your Maps API key.

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_KEY">
</script>

Step 2 - Create a text box on your page for the user’s input. After you have a text box, you start the autocomplete service and attach it to that text box. You can set a variety of options, such as restricting the results to cities only, as in this example.

HTML:
<input id="search" type="text">

JavaScript:
var autoComplete = new google.maps.places.Autocomplete(   
document.getElementById(search), {
  types: ['(cities)']
});
Step 3 - Add an event listener to the text box that fires when a result is selected. You can then handle the results. In this example, we pan and zoom the map to the location entered by the user.

JavaScript:
google.maps.event.addListener(autoComplete, 'place_changed', function() {
  var place = autocomplete.getPlace();
  if (place.geometry) {
     map.panTo(place.geometry.location);
     map.setZoom(15);
  } 
});
That’s all there is to it.

Tips for Improving the Autocomplete Experience
There are many additional features to make Autocomplete an even better experience on your website. Here are some tips to make the most out of autocomplete:

  • Improve the experience by biasing the results to a particular geographic area, such as the map viewport, or restricting the search to a particular country. This will insure that the results most relevant to your users are surfaced first.
  • You can style the autocomplete results by defining your own custom styles, to match the look and theme of your website. View the styling documentation here.
  • Combine with other Places API features, such as Nearby Search, to provide an all-in-one local search experience, complete with nearby point of interest listings and business photos.
  • Need to call Autocomplete from a server? Use the Google Places Autocomplete web service.
  • Want to autocomplete on search terms, rather than just place names? Use the Query Autocomplete web service or Javascript SearchBox.

Building a mobile app?
The Google Places API for Android can provide a great Autocomplete experience for address entry in your mobile application. Take a look at the developer documentation as well as a complete sample application on GitHub.

Get Started
We hope you’re able to incorporate the Autocomplete capabilities into your website or mobile application. Get started with Autocomplete today by visiting the following resources:


Posted by David McClusky, Google Maps Solutions Architect