How to make an autocomplete address field with google map api

Posted on Posted in Google

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.

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.

About Md. Moin Uddin

I love to research on new technology and try to play with those. It makes my work really enjoyable.

22 thoughts on “How to make an autocomplete address field with google map api

  1. 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. 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 :)

  3. 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.

  4. 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!

  5. 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.

  6. 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..

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

  7. 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.

  8. 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?

  9. 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

  10. 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 *

fifteen − 3 =