Places Autocomplete

The Places Autocomplete feature attaches to a text field on your web page, and monitors that field for character entries. As text is entered, Autocomplete returns Place predictions to the application in the form of a drop-down pick list.

When a user selects a Place from the list, information about the Place is returned to the Autocomplete object, and can be retrieved by your application.

Adding Autocomplete

The Autocomplete constructor takes two arguments:

• An HTML input element of type text. This is the input field that the Autocomplete service will monitor and attach its results to.
• An options argument, which can contain:
  • types, which can be either establishment or geocode, representing businesses or addresses, respectively. If types is not specified, both types are returned.
  • bounds is a google.maps.LatLngBounds object specifying the area in which to search for Places. The results are biased towards, but not restricted to, Places contained within these bounds.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Once the control has been created, it monitors the specified text field for input, and returns Place predictions as text is entered in that field.

Changing the Search Area

To change the area in which Autocomplete searches for Places, call setBounds() on the Autocomplete object.

autocomplete.setBounds(bounds);

To bias the results to the map's viewport, even as that viewport changes, use the Autocomplete object's bindTo() function.

autocomplete.bindTo('bounds', map);