Google map address autocomplete demo
Google map address autocomplete demo
For Addess Autocomplete You need google map api first add the googleapis in the head of your page.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Create Form In which you want to add the address auto complete.
<form name='addressautocomplete' action="">
<div>
<label control-label">Location <span class="glyphicon glyphicon-map-marker"></span></label>
<div >
<input name="location" id="location" type="text" placeholder="Add location">
<input name="locationLat" id="locationLat" type="text" placeholder="lat ">
<input name="locationLon" id="locationLon" type="text" placeholder="lon">
</div>
</form>
Create initialize function add it in the footer of the page.
<script>
function initialize(){
var input = document.getElementById("location");
var options = {componentRestrictions: {country: 'US'}};
var autocomplete=new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
document.getElementById('locationLat').value = place.geometry.location.lat();
document.getElementById('locationLon').value = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//initialize();
</script>
The initialize function would initialize the address autocomplete in the id “location” and their lat and lon would be initialized in the field id – locationLat and locationLon.
Advertisements
