<input class= "Flex-item" id= "AutoComplete" placeholder= "address, zip or city" onfocus= "geolocate ()" type= "text" > </input>
var autocomplete;
function geolocate () {
if (!autocomplete) {
autocomplete = new Google.maps.places.Autocomplete (
(document.getElementById (' AutoComplete ')), {types: [' GeoCode ']});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (function (position) {
var geolocation = new Google.maps.LatLng (
position.coords.latitude, position.coords.longitude);
var circle = new Google.maps.Circle ({
Center:geolocation,
radius:position.coords.accuracy
});
autocomplete.setbounds (Circle.getbounds ());
});
}
}
<body onload= "Initialize ()" >
<form class= "form-address" id= "Address" >
<!--Search Field--
<div class= "Flex-container c-1column" id= "Locationfield" >
<label>search for your address</label>
<input class= "Flex-item" id= "AutoComplete" placeholder= "address, zip or city" onfocus= "geolocate ()" type= "text" > </input>
</div>
<!--Street Address--
<div class= "Flex-container" >
<label>street address</label>
<div class= "Flex-item c-2column" ><input id= "Streetno" ></input></div>
<div class= "Flex-item c-2column" ><input id= "route" ></input></div>
</div>
<!--CITY--
<div class= "Flex-container" >
<label>City</label>
<input class= "Flex-item c-1column" id= "City" ></input>
</div>
<!--state & Zip-To
<div class= "Flex-container" >
<div class= "Flex-item c-2column" >
<label>State</label>
<input id= "state" ></input>
</div>
<div class= "Flex-item c-2column" >
<label>zip code</label>
<input id= "ZipCode" ></input>
</div>
</div>
<!--country--
<div class= "Flex-container" >
<label>Country</label>
<input class= "Flex-item c-1column" id= "Country" ></input>
</div>
</form>
</body>
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 '
};
var myForm = {
Street_number: ' Streetno ',
Route: ' Route ',
Locality: ' City ',
Administrative_area_level_1: ' state ',
Country: ' Country ',
Postal_Code: ' ZipCode '
};
function Initialize () {
AutoComplete = new Google.maps.places.Autocomplete (
(document.getElementById (' AutoComplete ')), {types: [' GeoCode ']});
Google.maps.event.addListener (AutoComplete, ' place_changed ', function () {
Fillinaddress ();
});
}
[START Region_fillform]
function fillinaddress () {
var place = Autocomplete.getplace ();
/* for (Var component in Componentform) {
document.getElementById (component). Value = ';
document.getElementById (component). Disabled = false;
} */
Get each component of the address from the place details
and fill the corresponding field on the form.
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]];
Alert (Myform[addresstype])
document.getElementById (Myform[addresstype]). value = val;
}
}
}
function Geolocate () {
if (navigator.geolocation) {
Navigator.geolocation.getCurrentPosition (function (position) {
var geolocation = new Google.maps.LatLng (
Position.coords.latitude, Position.coords.longitude);
var circle = new Google.maps.Circle ({
Center:geolocation,
Radius:position.coords.accuracy
});
Autocomplete.setbounds (Circle.getbounds ());
});
}
}
Google API AutoComplete