1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
let form_search; // field for address search
let form_address1; // field of address 1
let form_address2; // field of address 2
let form_city; // field of city
let form_stateProvince; // field of state/province
let form_country; // field of country
let form_postal; // field of postal code
let gpla_autocomplete; // auto complete object
function gpla_initAutocomplete() {
form_search = document.querySelector("#search");
form_address1 = document.querySelector("#address1");
form_address2 = document.querySelector("#address2");
form_city = document.querySelector("#locality");
form_stateProvince = document.querySelector("#state");
form_country = document.querySelector("#country");
form_postal = document.querySelector("#postcode");
// Initialize the auto-complete api and its cooresponding listener
gpla_autocomplete = new google.maps.places.Autocomplete(
form_search, {
componentRestrictions: { country: ["au", "nz"] }, //restricting addresses in the Australia and New Zealand.
fields: ["name","address_components", "geometry", "icon"], //specify field needed (https://developers.google.com/maps/documentation/javascript/place-autocomplete#specify-data-fields)
types: ["address"],
}
);
gpla_autocomplete.addListener("place_changed", gpla_fillInAddress);
}
function gpla_fillInAddress() {
// Initialize the values which
// will later be filled into the fields
let place_address1 ="";
let place_address2 ="";
let place_city ="";
let place_stateProvince ="";
let place_country ="";
let place_postcode ="";
// `Extract address components from place details and populate corresponding form fields.
// The place.address_components are google.maps.GeocoderAddressComponent objects. (http://goo.gle/3l5i5Mr)
const place = gpla_autocomplete.getPlace();
for (const component of place.address_components) {
switch (component.types[0]) {
case "street_number": {place_address1 = `${component.long_name} ${place_address1}`; break;}
case "route": {place_address1 += component.short_name; break;}
case "subpremise": {place_address2 = `${component.long_name}`; break;}
case "postal_code": {place_postcode = `${component.long_name}${place_postcode}`; break;}
case "postal_code_suffix": {place_postcode = `${place_postcode}-${component.long_name}`; break;}
case "locality": {place_city = component.long_name; break;}
case "administrative_area_level_1": {place_stateProvince = component.short_name; break;}
case "country": {place_country = component.long_name; break;}
}
}
// Filling the retrived value from google place api
// into the cooresponding field in the webform
form_address1.value = place_address1;
form_address2.value = place_address2;
form_postal.value = place_postcode;
form_city.value = place_city;
form_country.value = place_country;
form_stateProvince.value = place_stateProvince;
}
window.initAutocomplete = gpla_initAutocomplete;
|