<div id="locationField"> <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input> </div> <br> <br> <table id="address" class="w3-table-all"> <tr> <td class="label">Street address</td> <td class="slimField"><input class="field" id="street_number" disabled="true"></input></td> <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></input></td> </tr> <tr> <td class="label">City</td> <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td> </tr> <tr> <td class="label">State</td> <td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td> <td class="label">Zip code</td> <td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="3"><input class="field" id="country" disabled="true"></input></td> </tr> </table> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg4rES-cHvkyowz2QjYSS1aQi1vBJaYYM&libraries=places&callback=initAutocomplete" async defer></script> <script> 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() { autocomplete = new google.maps.places.Autocomplete( (document.getElementById('autocomplete')), {types: ['geocode']}); autocomplete.addListener('place_changed', fillInAddress); } function fillInAddress() { var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } 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]]; document.getElementById(addressType).value = val; } } } 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>