Sometimes we have to fill out the user form with the address and it’s time consuming. We can save some time using Google Map API service. Place autocomplete is an address form feature that suggests street addresses to users as they type an address into a form. In this post, I want to share how to automatically fill the form with the city, state, and zip code along with latitude and longitude.
address.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Address Autocomplete Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('inputAddress'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
var address = place.formatted_address;
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
var latlng = new google.maps.LatLng(latitude, longitude);
var geocoder = geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var address = results[0].formatted_address;
var pin = results[0].address_components[results[0].address_components.length - 1].long_name;
var country = results[0].address_components[results[0].address_components.length - 2].long_name;
var state = results[0].address_components[results[0].address_components.length - 3].long_name;
var county = results[0].address_components[results[0].address_components.length - 4].long_name;
var city = results[0].address_components[results[0].address_components.length - 5].long_name;
document.getElementById('inputCountry').value = country;
document.getElementById('inputState').value = state;
document.getElementById('inputCounty').value = county;
document.getElementById('inputCity').value = city;
document.getElementById('inputZip').value = pin;
document.getElementById('inputLatitude').value = latitude;
document.getElementById('inputLongitude').value = longitude;
}
}
});
});
});
</script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
document.getElementById('city2').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
//alert("This function is working!");
alert(place.formatted_address.long_name);
// alert(place.address_components[0].long_name);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="container mt-3">
<form class="row g-3" action="" method="post" autocomplete="off">
<div class="col-md-6">
<label for="inputName" class="form-label">Name</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="col-md-3">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-3">
<label for="inputCity" class="form-label">County</label>
<input type="text" class="form-control" id="inputCounty">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<input type="text" class="form-control" id="inputState">
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="col-md-4">
<label for="inputCountry" class="form-label">Country</label>
<input type="text" class="form-control" id="inputCountry">
</div>
<div class="col-md-4">
<label for="inputLatitude" class="form-label">Latitude</label>
<input type="text" class="form-control" id="inputLatitude">
</div>
<div class="col-md-4">
<label for="inputLongitude" class="form-label">Longitude</label>
<input type="text" class="form-control" id="inputLongitude">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<hr>
</body>
</html>
Furthermore you can read https://developers.google.com/maps
Hope it will help!
Please let me know if you have a question.
Thank you