I am using Google Places API to add a field to my page where the address will automatically populate
It works when I only have 1 input field that I need to select by ID using document.getElementById but when I need 2 fields to autodisplay the menu to select an address based no the data entered into the field nothing at all works.
The part of the script seems to be handled by below:
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */ (document.getElementById('property-address')),
{types: ['geocode']});
I have tried changing this to:
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */ (document.querySelectorAll('#property-address, #property-address2')),
{types: ['geocode']});
After using the document.querySelectorAll none of the fields will work.
Is there another way to select multiple IDs or something I'm missing to get this working?
Below is the complete code in case theres something I missed in the script:
Script:
<script src="https://maps.googleapis.com/maps/api/js?key=#####API_KEY_GOES_HERE#####&libraries=places&callback=initAutocomplete" async defer></script>
<script>
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical $(".classname")
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('property-address')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
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]];
document.getElementById(addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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>
Related
I am using the Google Maps API on my page, the page asks the user to fill out your "Current Address" and the "New Address".
I can get the autocomplete to work on the 1st address but it does not work for the second address, I have done lots of research and looked at simular posts on stackoverflow but I cannot find anyone who has had the same problem.
Here is my code;
<div id="locationField">
<input id="autocomplete" placeholder="Start typing your address" onFocus="geolocate()" type="text"></input>
</div>
<div id="addressone">
<input type="text" id="street_number" name="street_number"></input>
<input type="text" id="route" name="street_name"></input>
<input type="text" id="locality" name="town_city"></input>
<input type="text" id="postal_code" name="postcode"></input>
<input type="text" id="country" name="country"></input>
</div>
<div id="locationField2">
<input id="autocomplete2" placeholder="Start typing your address" onFocus="geolocate()" type="text"></input>
</div>
<div id="addresstwo">
<input type="text" id="street_number2" name="street_number2"></input>
<input type="text" id="route2" name="street_name2"></input>
<input type="text" id="locality2" name="town_city2"></input>
<input type="text" id="postal_code2" name="postcode2"></input>
<input type="text" id="country2" name="country2"></input>
</div>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
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() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
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]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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());
});
}
}
// [END region_geolocation]
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7XIOPnu4WS_fBaIDPkCBdYa3MxdIcdK4&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>
</div>
You need to hande the two autocomplete inputs. Here is a generalized version of fillInAddress that will handle multiple autocomplete objects with fields with a unique extension (the "2" in your second version of the form):
function fillInAddress(autocomplete, unique) {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
if(!!document.getElementById(component + unique)){
document.getElementById(component + unique).value = '';
document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType + unique).value = val;
}
}
}
Call it like this:
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
types: ['geocode']
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', function () {
fillInAddress(autocomplete, "");
});
// Create the second autocomplete object, restricting the search to geographical
// location types.
autocomplete2 = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */
(document.getElementById('autocomplete2')), {
types: ['geocode']
});
autocomplete2.addListener('place_changed', function () {
fillInAddress(autocomplete2, "2");
});
working code snippet:
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete, autocomplete2;
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() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
types: ['geocode']
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', function() {
fillInAddress(autocomplete, "");
});
autocomplete2 = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */
(document.getElementById('autocomplete2')), {
types: ['geocode']
});
autocomplete2.addListener('place_changed', function() {
fillInAddress(autocomplete2, "2");
});
}
function fillInAddress(autocomplete, unique) {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
if (!!document.getElementById(component + unique)) {
document.getElementById(component + unique).value = '';
document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType + unique).value = val;
}
}
}
google.maps.event.addDomListener(window, "load", initAutocomplete);
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 src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="locationField">
<input id="autocomplete" placeholder="Start typing your address" onFocus="geolocate()" type="text" />
</div>
<div id="addressone">
<input type="text" id="street_number" name="street_number" />
<input type="text" id="route" name="street_name" />
<input type="text" id="locality" name="town_city" />
<input type="text" id="administrative_area_level_1" name="administrative_area_level_1" />
<input type="text" id="postal_code" name="postcode" />
<input type="text" id="country" name="country" />
</div>
<div id="locationField2">
<input id="autocomplete2" placeholder="Start typing your address" onFocus="geolocate()" type="text" />
</div>
<div id="addresstwo">
<input type="text" id="street_number2" name="street_number2" />
<input type="text" id="route2" name="street_name2" />
<input type="text" id="locality2" name="town_city2" />
<input type="text" id="administrative_area_level_12" name="administrative_area_level_12" />
<input type="text" id="postal_code2" name="postcode2" />
<input type="text" id="country2" name="country2" />
</div>
This works, uses jQuery.
function initMultiComplete() {
jQuery('.maps-complete').each(function(){
var id = jQuery(this).prop('id');
var $this = jQuery(this);
var parent = jQuery(this).parent('div');
var jautocomplete = new google.maps.places.Autocomplete(document.getElementById(id), {types: ['geocode']});
jautocomplete.addListener('place_changed', function () {
var place = jautocomplete.getPlace();
var address = $this.val();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
jQuery( '.maps-autocomplete-lat', parent ).val(lat);
jQuery( '.maps-autocomplete-lng', parent ).val(lng);
});
});
}
script calls initMultiComplete as callback, and is loaded w/ async defer:
https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMultiComplete
This is an old question but I thought I'd post my solution to this in case it's helpful to others in the future. My solution handles any number of maps api autocomplete fields on a page. You'd need tag all autocomplete fields with a class name, in my case I've used the class name "address".
Now grab the collection of fields:
var input = document.getElementsByClassName('address');
for (var x = 0; x < input.length; x++) {
addListener(input[x]);
}
which calls a function called "addListener"
function addListener(el) {
var autocomplete = new google.maps.places.Autocomplete(el);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
// Do whatever you want in here e.g.
// var place = autocomplete.getPlace();
});
}
Because it's a collection, you should be able to add any number of autocomplete fields to a page. Though naturally, you should check for undefined on the collection just in case you happen to have no autocomplete fields on the page.
I am using Google API for address search and I got it completely.
I tried to format the data using CSS and its look something like this:
Here is my CSS code:
.pac-container:after {
/* Disclaimer: not needed to show 'powered by Google' if also a Google Map is shown */
background-image: none !important;
height: 0px;
}
.pac-item-query
{
color:red;
}
.pac-item
{
padding:20px;
}
but i want my address box to be looking like this
This is the code that call api and display result:
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
callDebugger();
autocomplete = new google.maps.places.Autocomplete(
(
document.getElementById('autocomplete')), {
types: ['geocode'],
componentRestrictions: countryRestrict
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
document.getElementById('countrys').addEventListener(
'change', setAutocompleteCountry);
}
function fillInAddress() {
callDebugger();
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
var check = [];
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++) {
callDebugger();
var addressType = place.address_components[i].types[0];
check.push(addressType);
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
// console.log(zipcode);
zipcode = check.includes("postal_code");
sessionStorage.setItem("zipcode", zipcode);
// console.log(check);
}
And this is HTML:
<div class="form-field half">
<label for="usr">Business Address</label>
<input id="autocomplete" type="text" class="w-input" data-rule-required="true" name="address" placeholder="Address" onFocus="geolocate()" />
</div>
I am stuck with a simple problem. I am able to use google API and get the address, but I don't want to have street number and street address in the separate boxes, I want the street number to be combined with street address and placed in the same box. Any direction or advice will be greatly appreciated.
Current result;
And this is what I want the end result to be;
My code;
HTML
<body>
<div class='container'>
<div class='row'>
<h2>Example</h2>
<p>User enters: "3 Dennis", a list of available options appears:</p>
<ul>
<li>3 Dennis Vale Drive, Daisy Hill, Queensland, Australia</li>
<li>etc.</li>
</ul>
</div>
<div class='row'>
<div class='col-xs-4 text-right'>Address</div>
<div class='col-xs-6'><input type='text' class='form-control address-field' id='street_number'></div>
</div>
<div class='row'>
<div class='col-xs-4 text-right'>Suburb</div>
<div class='col-xs-6'><input type='text' class='form-control suburb-field' id='locality'></div>
</div>
<div class='row'>
<div class='col-xs-4 text-right'>State</div>
<div class='col-xs-6'><input type='text' class='form-control state-field' id='administrative_area_level_1'></div>
</div>
<div class='row'>
<div class='col-xs-4 text-right'>Post Code</div>
<div class='col-xs-6'><input type='text' class='form-control postcode-field' id='postal_code'></div>
</div>
</div>
Javascript
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('street_number')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
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]];
document.getElementById(addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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=AIzaSyD_Qf8TYV9CLEngR4Fioj-S9_QVX9amC7Y&libraries=places&callback=initAutocomplete"
async defer></script>
You can add a new component called route in your componentForm dictionary.
var componentForm = {
street_number: 'short_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
postal_code: 'short_name',
route:'long_name'
};
route property contains the street_address.
long_name:"Dennis Vale Drive"
The route property can be stored in a hidden input.
<input id="route" style="display:none"/>
When you finished to fill all the inputs just concat the values from street_number input and route input. elements.
document.getElementById('street_number').value=document.getElementById('street_number').value+' '+document.getElementById('route').value;
Here is full solution.
I am using following code from Googles API in a Register/login script, to get the address of the user:
var placeSearch, autocomplete;
var componentForm = {
route: 'long_name',
street_number: 'short_name',
postal_code: 'short_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
country: 'long_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
/*document.getElementById('place_id').value = place.place_id;
document.getElementById('place_id').disabled = false;*/
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]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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());
});
}
}
// [END region_geolocation]
<label class="tooltip" for="autocomplete">Hier Adresse eingeben:</label>
<input type="text" id="autocomplete" placeholder="Adresse hier eingeben" onFocus="geolocate()" />
<label for="street_number">Strasse / Hausnummer:</label>
<input type="text" name="form_street" id="route" readonly placeholder="Strasse wird automatisch ausgefüllt" />
<input type="text" name="form_street_number" id="street_number" readonly />
<label for="locality">PLZ / Stadt:</label>
<input type="text" name="form_postal_code" id="postal_code" readonly placeholder="PLZ autom. ausgefüllt" />
<input type="text" name="form_town" id="locality" readonly placeholder="Ort wird automatisch ausgefüllt" />
<label for="administrative_area_level_1">Bundesland:</label>
<input type="text" name="form_state" id="administrative_area_level_1" readonly placeholder="Bundesland wird automatisch ausgefüllt" />
<label for="postal_code">Land:</label>
<input type="text" name="form_country" id="country" readonly placeholder="Land wird automatisch ausgefüllt" />
Everything works fine. My Question: Is there a possibility to get country, state, town in other languages at the same time? I want to put it in hidden fields and store it in database. I cant put my api key into the code snippet so it wont work here, but at home it works fine.
Thank you,
Michael
No, you can't localize the API to more than one language at a time. You might be able, once you submit, to use the Geocoding service, localized to the other language, on the server side to look up the place id returned by the autocomplete search, and then store that address info.
I want to use textbox with id 'autocomplete' only for searching and after searching i d'dnt want to store whole address in first input box i just want to store postal_code in first inputbox with id autocomplete, not in
text-box with id 'postal_code' and one more thing it should also possible user can input postal_code manually in textbox with id autocomplete.
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete;
var componentForm = {
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
var options = {
componentRestrictions: {country: "in"}
};
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */(document.getElementById('autocomplete')),options);
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
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]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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());
});
}
}
// [END region_geolocation]
</script>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Pin</td>
<td class="slimField"><input class="field" id="postal_code"
disabled="true" ></input></td>
</tr>
</table>
</body>
</html>
Try this code
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete;
var componentForm = {
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
var options = {
componentRestrictions: {country: "in"}
};
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */(document.getElementById('autocomplete')),options);
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
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] && addressType == "postal_code") {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById("autocomplete").value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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());
});
}
}
// [END region_geolocation]
</script>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Pin</td>
<td class="slimField"><input class="field" id="postal_code"
disabled="true" ></input></td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/qqptf2y5/1/