Using google API to get Auto Complete address
Here is the simple way to get full address from using the google API if you want to use your private API and copy the key and paste in <script> tag that placed at bottom of page.
(<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR GOOGLE API KEY]&libraries=places&callback=initAutocomplete" async defer></script>)
STEP 1 (optional): click on this url for generate the new google api key,
https://developers.google.com/maps/documentation/javascript/get-api-key
STEP 2 : write this code in your .html file and run !. simple :)
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete - Prompt WebSolution</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div style="width:80%;margin:0 auto; padding-top:10%">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>
Auto Complete address form google api.
</h3>
</div>
<div class="col-md-5 col-md-offset-3">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="form-control" >
</div>
<div class="col-md-5 col-md-offset-3">
<input id="street_number" disabled="true" placeholder="Residential Address" type="text" class="form-control">
</div>
<div class="col-md-3 col-md-offset-3">
<input id="administrative_area_level_1" disabled="true" type="text" placeholder="State" class="form-control">
</div>
<div class="col-md-2">
<input id="postal_code" disabled="true" type="text" placeholder="Pin Code" class="form-control">
</div>
<div class="col-md-5 col-md-offset-3">
<input id="route" disabled="true" type="text" placeholder="Road Area" class="form-control">
</div>
<div class="col-md-3 col-md-offset-3">
<input id="country" disabled="true" type="text" placeholder="Road Area" class="form-control">
</div>
<div class="col-md-2">
<input id="locality" disabled="true" placeholder="City" type="text" class="form-control">
</div>
</div>
</div>
<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(
/** @type {!HTMLInputElement} */
(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>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6CcO8XlwhhkAUO8AN8nDwVMSRHOdThGc&libraries=places&callback=initAutocomplete" async defer></script>
</body>
</html>
