How to make an autocomplete address field with google maps api

How to make an autocomplete address field with google maps api

Jan 21, 2019 / HTML / CSS / JavaScript /

Using Google Maps JavaScript API and Places library, you can easily add an autocomplete places search box to a web page. We’ll use HTML and JavaScript to implement places search box with autocomplete address suggestion. We're going to be building a basic run-of-the-mill address form you've likely seen on thousands of sites. However, we're going to use the Google Maps and Places JavaScript APIs to autofill the form when the user types in either the street address

CSS Code:

 


	    .wrapper{
			text-align: center;
			width: 800px;
			margin: auto;
			
		}
		input{
			height: 30px;
			width: 355px;
			padding-left:10px
		}

 

HTML Code:

 


    <div class="wrapper">
	<label>Address</label>
      <input id="autocomplete" placeholder="Enter your address"
             onFocus="geolocate()" type="text"/>
    </div>

 

JavaScript Code:

 


var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

    

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }



You can specify a Google API key using key=Your_Google_API_Key parameter when loading the Google Maps JavaScript API.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-GOOGLE-API-KEY&libraries=places&callback=initAutocomplete" async defer></script>

Comments

Bai ( Jul 23, 2019 09:07:11 )

I found this error "ReferenceError: fillInAddress is not defined"

Bai ( Jul 23, 2019 09:07:05 )

I found this error "ReferenceError: fillInAddress is not defined"

Sana jabbar ( Jan 23, 2019 12:45:39 )

Its a nice portal would you make me a form of student in javascript

Significant Techno ( Jan 24, 2019 10:59:26 )

Hi, Please check below link, I hope you like this tutorial
http://significanttechno.com/simple-html-form-using-javascript

Mohammad ( Jan 22, 2019 09:34:36 )

Nice post..????????

Would you like to share your thoughts?

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

Copyright 2018. All rights are reserved Significant Techno Web Design & Web Development By Significant Techno