Google places autocomplete dropdown with javascript

Last updated on Aug 02, 2016

darshan

Php

0

Google places autocomplete dropdown

It would be better for your user if you can offer location/address autocomplete that way they just need to enter abstract of address and they receive the suggestion for address (same as they get for their search query on google). This way we prevent the spell mistakes and able to get the precise address. This is where Google places autocomplete dropdown comes into the scope. As we know google map is exceptionally good piece of application which houses billions of location addresses like places, businesses, roads etc… And many more places (business places) are added everyday meaning most of the places which user may enter are already covered. So it’s a best bet for developer to integrate google places autocomplete API which eases your work as well as your user’s work with the maximum location coverage.

When we are working with APIs we need to take number of calls and billing into the account. Following what google says for place API:

The Google Places API Web Service enforces a default limit of 1 000 requests per 24 hour period, which you can increase free of charge. If your app exceeds the limit, the app will start failing. Verify your identity to get up to 150 000 requests per 24 hour period

Meaning you can make 1000 API calls anonymously in 24 hours frame. And if you register/verify your identity (you will have the API Key) this limit will exceed to 150,000 calls per 24 hours. See here for official price document.

Now let’s start the important part, Google places autocomplete dropdown with javascript code. We need to use Google places script.
Following is the code for Google places autocomplete dropdown:

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<input id="pac-input" type="text" placeholder="Enter a location" style="width: 500px;" />
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
// place variable will have all the information you are looking for.
console.log(place.geometry['location'].lat());
console.log(place.geometry['location'].lng());
});
}
</script>

What this code does is simple:

It includes google place script. There is an text box for location inputs and auto suggestion. And finally the function which binds the autocomplete functionality with text box.

var input = document.getElementById(‘pac-input’);

It stores the location text user enters into the input variable.

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

It creates the instance of google places autocomplete and sends user’s entered location for location suggestions.

autocomplete.addListener(‘place_changed’, function () {…

It binds the addListener method to our “pac-input” textbox. This method is responsible for bringing the location suggestion as user change the text in the location text box.

var place = autocomplete.getPlace();

When user selects the location from autosuggestion, this line of code will store the selected location data into the variable called place.

place is the object returned from google place api which contains all necessary information like

  • address_components: It contains major location related information (it’s a collection of information) such as
    • premise: Building name
    • neighborhood: Popular neighborhood information
    • locality: City name
    • administrative_area_level_1: State name
    • country: Country name
    • postal_code: Pin-code of the location
  • formatted_address: Contains the full formatted address.
  • geometry: it contains the latitude and longitude of the location

There are plenty of other information available but most needed information in common cases are mentioned above. In case if you are looking for lat and lng for given address, add the code mentioned below to example code:


place.geometry['location'].lat()
place.geometry['location'].lng()

If you are looking for downloadable file for the Google places autocomplete dropdown solution, click here to download the file. Please note that you need to change the file extension from .txt to .html. Run the file in your web browser and don’t forget to fire-up the developer console. This will help you grasp the response and data.

Let us know your feedback and queries in the comment section below. Subscribe to our website for new blog updates and technology current affairs news. We offer free quotation for any of your website / web application / mobile app ideas. Contact us today!

Post by Darshan Joshi

Darshan shares a great passion for helping and empowering businesses around the world. With web application, he is helping businesses get more out of their business resources and an improved workflow. And the clone scripts help startups launch quickly in the market!

Leave a Reply

Your email address will not be published. Required fields are marked *