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.

DemoDownload


Add Comment

📖 Read More


Advertisements