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 an 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, Google APIs need some connections to Google services. Usually, it's a script with google service URL. Let's see what we need for the beginning.

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

As you see we use application key (AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA)for using Google API. In order to use it "Places API" should be enabled from google console.

When we type anything to see the 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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></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 the autocomplete. You can even set what places you want to see in your autocomplete. Here is a list of those 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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></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"
}




Related articles