Places Autocomplete

Intro

The Place Autocomplete service is a web service that returns place predictions in response to an HTTP request. The request specifies a textual search string and optional geographic bounds. The service can be used to provide autocomplete functionality for text-based geographic searches by returning places such as businesses, addresses and points of interest as a user types.

How To Use

As you know, the Google APIs need some connections to Google services. Usually the connection is a script with google service url. Let's see what we need for the beginning.

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=gb"></script>

As you see we don't use any application key for using Google API. We use it with flag sensor=false.

When we type anything to see autocomplete the request looks like this:

https://maps.googleapis.com/maps/api/place/autocomplete/output?parameters

Where output can be

  • json - (recommended) indicates output in JavaScript Object Notation (JSON)
  • xml - indicates output as XML

And the parameters can be

  • offset - The position in the input term of the last character that the service uses to match predictions.
  • location -The point around which you wish to retrieve place information. It must be specified as latitude, longitude.
  • radius - The distance (in meters) within which to return place results.
  • language - The language in which to return results.
  • types - The types of place results to return.
  • components - A grouping of places to which you would like to restrict your results.

At last let's see a simple example.

<!DOCTYPE html>
<html>
  <head>
    <title>www.W3docs.com</title>
    <style>
      input {
        height: 30px;
        padding-left: 10px;
        border-radius: 4px;
        border: 1px solid rgb(186, 178, 178);
        box-shadow: 0px 0px 12px #EFEFEF;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=en"></script>
  </head>
  <body>
    <input type="text" id="autocomplete"/>

    <script>
      var input = document.getElementById('autocomplete');
      var autocomplete = new google.maps.places.Autocomplete(input);
    </script>
  </body>
</html>

There are some parameters which you can use for autocomplete. You can even set what places you want to see in your autocomplete. Here is a list of that parameters.

  • geocode - The parameter is for getting only the geocoding. When we use it google will return us only geocodeing result.
  • address - In the result will be geocoding with address.
  • establishment - The API will return only business result.
  • (regions) - this property is using to get result with following data.
    • locality
    • sublocality
    • postal_code
    • country
    • administrative_area_level_1
    • administrative_area_level_2
  • (cities) - the result will return with matching locality or administrative_area_level_3 .

Let's see an example which Google service gives us.

<!DOCTYPE html>
<html>
  <head>
    <title>www.W3docs.com</title>
    <style>
      input {
        height: 30px;
        padding-left: 10px;
        border-radius: 4px;
        border: 1px solid rgb(186, 178, 178);
        box-shadow: 0px 0px 12px #EFEFEF;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=en"></script>
  </head>
  <body>
    <input type="text" id="autocomplete"/>

    <script>
      var input = document.getElementById('autocomplete');
      var autocomplete = new google.maps.places.Autocomplete(input,{types: ['(cities)']});
      google.maps.event.addListener(autocomplete, 'place_changed', function(){
         var place = autocomplete.getPlace();
      })
    </script>
  </body>
</html>

If you look at the response you will see that google returns us a lot of data. We used JSON format in the example. Let's see what the response looks like.

{
   "html_attributions" : [],
   "result" : {
      "address_components" : [
         {
            "long_name" : "London",
            "short_name" : "London",
            "types" : [ "locality", "political" ]
         },
         {
            "long_name" : "Greater London",
            "short_name" : "Gt Lon",
            "types" : [ "administrative_area_level_2", "political" ]
         },
         {
            "long_name" : "United Kingdom",
            "short_name" : "GB",
            "types" : [ "country", "political" ]
         }
      ],
      "adr_address" : "\u003cspan class=\"locality\"\u003eLondon\u003c/span\u003e, \u003cspan class=\"country-name\"\u003eUK\u003c/span\u003e",
      "formatted_address" : "London, UK",
      "geometry" : {
         "location" : {
            "lat" : 51.5073509,
            "lng" : -0.1277583
         },
         "viewport" : {
            "northeast" : {
               "lat" : 51.6723432,
               "lng" : 0.148271
            },
            "southwest" : {
               "lat" : 51.38494009999999,
               "lng" : -0.3514683
            }
         }
      },
      "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png",
      "id" : "b1a8b96daab5065cf4a08f953e577c34cdf769c0",
      "name" : "London",
      "place_id" : "ChIJdd4hrwug2EcRmSrV3Vo6llI",
      "reference" : "CnRtAAAAHhKqLtnNzYhCf0EcQjJ1tWcaoZ__MoId7QmWhnbZlXbREPsbEfxPtXSRX2VwoFEi2mhL8EV2nWIPG1NSmX_KEqVtnRWM6o8xSFw0oksq670OYaKgbP401RZ0ODhpJCPAnXJ9bTWJjMahzEWK4gc4ixIQw9LkaoH9xj_VE9dkiJRowBoUItoo-MyH4t_dcAjXRQKXRmtO3DY",
      "scope" : "GOOGLE",
      "types" : [ "locality", "political" ],
      "url" : "https://maps.google.com/maps/place?q=London,+UK&ftid=0x47d8a00baf21de75:0x52963a5addd52a99",
      "vicinity" : "London"
   },
   "status" : "OK"
}