Google Maps Platform: Map Tips: Get started with autocomplete

Maps Platform

Product updates, customer stories, and tips and tricks on Google Maps Platform

Map Tips: Get started with autocomplete

Wednesday, April 22, 2015

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.

Places Javascript APIweb servicePlaces API for AndroidPlaces API for iOSMaps API key<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_KEY">
</script><input id="search" type="text">var autoComplete = new google.maps.places.Autocomplete(
document.getElementById(search), {
types: ['(cities)']
});google.maps.event.addListener(autoComplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (place.geometry) {
map.panTo(place.geometry.location);
map.setZoom(15);
}
});Tips for Improving the Autocomplete Experience

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.