HTML CSS Javascript jQuery AJAX PHP Java MORE

Javascript Autocomplete Address Form With Demo

❮ Previous Next ❯ 
<!DOCTYPE html>
<html>
<body>

	<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>
</body>
</html>

Run it yourself

Demo



Street address
City
State Zip code
Country


❮ Previous Next ❯