How to make an autocomplete address field with google map api

In this tutorial we will show you how to make an autocomplete address field with google map api using some simple line of code. Our output will be like below.

[wp-js-fiddle url=”http://jsfiddle.net/moinsam/SDPHm/” style=”width:95%;height:200px;border:solid #4173A0 1px;”]

Step 1

Create an HTML file and write the following code.

<!DOCTYPE html>
<html>
        <head>
            <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
            <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
        </head>
        <body>
            <label for="searchTextField">Please insert an address:</label>
            <input id="searchTextField" type="text" size="50">
        </body>
</html>

Infect it is a basic html code with an input field. In line-5 we load places library of the google map JavaScript api.

Step 2

Next put this JavaScript code between a script tag and put it inside the head tag.

<script type="text/javascript">
function initialize() {
	var input = document.getElementById('searchTextField');
	var options = {componentRestrictions: {country: 'us'}};
				
	new google.maps.places.Autocomplete(input, options);
}
			
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Here we write a function which do the key job for us. In line-3 we get the input element by id then in line-4 add options that is provided by this service here we add componentRestraction and restrict it for showing address inside USA. There are some more options, to learn more you can visit the Google Map API Place Autocomplete documentation page. Then in line-6 we instantiate the autocomplete function of place library. After that in line-9 load the initialize() function and add to the DOM Listener.

Post Tagged with , ,

22 Responses so far.

  1. Justin Finkelstein says:

    You’ll also need to add an event listener if you want to do something browser-side with the data collected, for example:

    google.maps.event.addListener(autocomplete, ‘place_changed’, function(){
    fillInAddress();
    });

  2. Keerthana SN says:

    Thanks machaaa..You saved my time.

  3. Jatin says:

    Hello,
    1) Is it possible to exclude the local business and places from search? means only main city of “US” will be displayed in suggestion.

    For eg. If i search For “Washington” then only “Washington, United states” will be shown in suggestion.

    2) And Can i get the Longitude and Latitude of Place that i select from suggestion results ?

    for eg. From 10 suggestion i select “Chicago, United States”, so
    how to get lat and long of this place and display marker on this location ?

    Thank You :)

  4. Koushik Ghosh says:

    How can I add custom option in the autocomplete suggestion list. Suppose if the user could not able to find the address in the suggestive address list, then there will be an option (custom) “Can’t find your address?”. Clicking on this will show the form were user can put the full address.

    How can I do this, please help me out. Waiting for a fruitful answer. Thanks in advance.

  5. Teo says:

    Hello Md. Moin Uddin

    I donĀ“t see example link of Jatin problem.
    Can you post it again?

    Thank you!

  6. Hoani Katu says:

    HELLOOO! Thank you for the aweseome tutorial php database + pagination. It really helped me understand search engines and how limit is used. Thank you very much!

  7. Jeetendra Garg says:

    Hi,

    I want to implement Autocomplete feature on the basis of city. Means componentRestrictions: {country: 'in'} and also I want that it should search only for perticulear city e.g. New Delhi. Not the search result that contains the City name but within that City only.

    So, how this can be done ?

    Thanks.

  8. madhu says:

    hi Md. Moin Uddin brother its showing only one country address but i need to show entire world please help me..i am waiting for your reply..

    • Md. Moin Uddin says:

      Hi, you can just remove the country field from the component restrictions options, like below
      var options = {componentRestrictions: {}};

  9. isllhomz says:

    First, thanks for the code…it seems like it’s what I’m looking for.

    I’m really new to this, so forgive me if this is simple (or completely wrong).

    I’m getting an error message saying the API key is invalid or missing. Is there somewhere in the code I should be entering the API key that I’ve activated from Google?

    Thanks.

  10. Yash says:

    Thank you.. It is very help full to me. and save my lots of time instead of study developers.google.com.. Thank you so much..

  11. Teenu Thomas says:

    Hai,
    first thanks for this code.Can i get the zipcode with location?

  12. Apoorv Agarwal says:

    Hello,
    I am using asp.net to implement this and also using a master page.
    Now I need to do this in the content page. So How will I insert the script at head section?

  13. virendra nagda says:

    Thank you for the awesome tutorial. really good work.

  14. Hammad says:

    HI

    Your above code is not working at local host.Please kindly reply me at Hammad.Raees@gmail.com
    I will pay you to make it work at local host or any live server..It is only workable when i open it through right click in chrome.

    I have even put the browwser key in google api but its not working then also.

    Regards
    Hammad

  15. virendra says:

    it’s working in my site. but problem is when i use two times in same page then second time it’s not working.

  16. Tanmay says:

    I s this possibe??

    Hi,

    I want to implement Autocomplete feature on the basis of city. Means componentRestrictions: {country: ‘in’} and also I want that it should search only for perticulear city e.g. New Delhi. Not the search result that contains the City name but within that City only.

    So, how this can be done ?

Leave a Reply

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

fourteen − 9 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.