2

Google Place Autocomplete

Autocomplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest.

In order to use autocomplete, you will need to load the Google Places library using the libraries parameter in the bootstrap URL for the Google Maps JavaScript API.

google location api

The API offers two types of autocomplete widgets, which you can add via the Autocomplete and SearchBox classes respectively. In addition, you can use the AutocompleteService class to retrieve autocomplete results programmatically.

Below is a summary of the classes available:

  • Autocomplete adds a text input field to your web page, and monitors that field for character entries. As the user enters text, autocomplete returns place predictions in the form of a dropdown pick list. When the user selects a place from the list, information about the place is returned to the autocomplete object, and can be retrieved by your application. See the details below.
  • SearchBox adds a text input field to your web page, in much the same way as Autocomplete. The differences are as follows:
    • The main difference lies in the results that appear in the pick list. SearchBox supplies an extended list of predictions, which can include places (as defined by the Google Places API) plus suggested search terms. For example, if the user enters ‘pizza in new’, the pick list may include the phrase ‘pizza in New York, NY’ as well as the names of various pizza outlets.
    • SearchBox offers fewer options than Autocomplete for restricting the search. In the former, you can bias the search towards a given LatLngBounds. In the latter, you can restrict the search to a particular country and particular place types, as well as setting the bounds.

    See the details below.

  • You can create an AutocompleteService object to retrieve predictions programmatically. Call getPlacePredictions() to retrieve matching places, or call getQueryPredictions() to retrieve matching places plus suggested search terms. Note: AutocompleteService does not add any UI controls. Instead, the above methods return an array of prediction objects. Each prediction object contains the text of the prediction, as well as reference information and details of how the result matches the user input.

index.html

google-location-api

Google Location API

autocomplete.js

location-result

Google Location Result

Response

Autocomplete creates a text input field on your web page, supplies predictions of places in a UI pick list, and returns place details in response to a getPlace() request. Each entry in the pick list corresponds to a single place (as defined by the Google Places API).

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 the following properties:
    • An array of types specifies an explicit type or a type collection, as listed in the supported types below. If nothing is specified, all types are returned. In general only a single type is allowed. The exception is that you can safely mix the geocode and establishment types, but note that this will have the same effect as specifying no types. The supported types are:
      • geocode instructs the Places service to return only geocoding results, rather than business results.
      • address instructs the Places service to return only geocoding results with a precise address.
      • establishment instructs the Places service to return only business results.
      • the (regions) type collection instructs the Places service to return any result matching the following types:
        • locality
        • sublocality
        • postal_code
        • country
        • administrative_area1
        • administrative_area2
      • the (cities) type collection instructs the Places service to return results that match either locality or administrative_area3.
    • 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.
    • componentRestrictions can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by country. The country must be passed as as a two-character, ISO 3166-1 Alpha-2 compatible country code.

Read the full documentation.

Save

Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.


  • Jim

    I am sure this article has touched all the internet visitors, its really nice article on building up new web site.