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=""></script>

Create Form In which you want to add the address auto complete.

<form name='addressautocomplete' action="">
      <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">

Create initialize function add it in the footer of the page.

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 =;
            document.getElementById('locationLon').value = place.geometry.location.lng();

google.maps.event.addDomListener(window, 'load', initialize);


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.



Add Comment

📖 Read More