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 the 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 terminal 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 that 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 geocoding result.address- The result will be geocoding with address.establishment- The API will return the only business results.(regions)- this property is using to get results with the following data.localitysublocalitypostal_codecountryadministrative_area_level_1administrative_area_level_2
(cities)- the result will return with matchinglocalityoradministrative_area_level_3.
Let's see an example that 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"
}
0 Comments
CAN FEEDBACK
Emoji