Source: maybeathome.autocomplete [edit]
<script> // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> var placeSearch, autocomplete; var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_2: 'short_name', administrative_area_level_1: 'short_name', country: 'short_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('address')), {types: ['geocode']}); // When the user selects an address from the dropdown, populate the address // fields in the form. autocomplete.addListener('place_changed', fillInAddress); } function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { if (document.getElementById(component + "_hid")) { document.getElementById(component + "_hid").value = ''; document.getElementById(component + "_hid").disabled = false; } } if (document.getElementById("lat_hid")) { document.getElementById("lat_hid").value = place.geometry.location.lat(); document.getElementById("lng_hid").value = place.geometry.location.lng(); } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; var fld = addressType + "_hid"; if (document.getElementById(fld)) { document.getElementById(fld).value = val; console.log(fld + " = " + val); } } } } // 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()); }); } } </script> <!-- script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAO2RntyX5IUgDJmXO-i39U06wwIhKwdEE&libraries=places&callback=initAutocomplete" async defer></script -->