uuid: 44bcc690-71fa-447a-9d94-5614d3b2a519
langcode: en
status: open
dependencies: { }
weight: 0
open: null
close: null
uid: 1
template: false
archive: false
id: google_auto_complete_v2
title: '# DEMO: Stage 4 - Address Autocomplete'
description: ''
categories: { }
elements: |-
search:
'#type': textfield
'#title': Search
'#attributes':
class:
- webform-xx-search
street_1:
'#type': textfield
'#title': 'Street 1'
'#attributes':
class:
- webform-xx-street1
street_2:
'#type': textfield
'#title': 'Street 2'
'#attributes':
class:
- webform-xx-street2
city:
'#type': textfield
'#title': City
'#attributes':
class:
- webform-xx-city
state_province:
'#type': textfield
'#title': State/Province
'#attributes':
class:
- webform-xx-state
postal_code:
'#type': textfield
'#title': 'Postal code'
'#attributes':
class:
- webform-xx-post
country_region:
'#type': textfield
'#title': Country/Region
'#attributes':
class:
- webform-xx-country
css: |-
.pac-container:after {
/* Disclaimer: not needed to show 'powered by Google' if also a Google Map is shown */
background-image: none !important;
height: 0px;
}
javascript: |-
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(".webform-xx-search");
form_address1 = document.querySelector(".webform-xx-street1");
form_address2 = document.querySelector(".webform-xx-street2");
form_city = document.querySelector(".webform-xx-city");
form_stateProvince = document.querySelector(".webform-xx-state");
form_country = document.querySelector(".webform-xx-country");
form_postal = document.querySelector(".webform-xx-post");
// 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(); console.log(place);
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
try{form_address1.value = place_address1; }catch(error){console.log(error);}
try{form_address2.value = place_address2; }catch(error){console.log(error);}
try{form_postal.value = place_postcode; }catch(error){console.log(error);}
try{form_city.value = place_city; }catch(error){console.log(error);}
try{form_country.value = place_country; }catch(error){console.log(error);}
try{form_stateProvince.value = place_stateProvince;}catch(error){console.log(error);}
}
window.initAutocomplete = gpla_initAutocomplete;
settings:
ajax: false
ajax_scroll_top: form
ajax_progress_type: ''
ajax_effect: ''
ajax_speed: null
page: true
page_submit_path: ''
page_confirm_path: ''
page_theme_name: ''
form_title: both
form_submit_once: false
form_open_message: ''
form_close_message: ''
form_exception_message: ''
form_previous_submissions: true
form_confidential: false
form_confidential_message: ''
form_disable_remote_addr: false
form_convert_anonymous: false
form_prepopulate: false
form_prepopulate_source_entity: false
form_prepopulate_source_entity_required: false
form_prepopulate_source_entity_type: ''
form_unsaved: false
form_disable_back: false
form_submit_back: false
form_disable_autocomplete: false
form_novalidate: false
form_disable_inline_errors: false
form_required: false
form_autofocus: false
form_details_toggle: false
form_reset: false
form_access_denied: default
form_access_denied_title: ''
form_access_denied_message: ''
form_access_denied_attributes: { }
form_file_limit: ''
form_attributes: { }
form_method: ''
form_action: ''
share: false
share_node: false
share_theme_name: ''
share_title: true
share_page_body_attributes: { }
submission_label: ''
submission_exception_message: ''
submission_locked_message: ''
submission_log: false
submission_excluded_elements: { }
submission_exclude_empty: false
submission_exclude_empty_checkbox: false
submission_views: { }
submission_views_replace: { }
submission_user_columns: { }
submission_user_duplicate: false
submission_access_denied: default
submission_access_denied_title: ''
submission_access_denied_message: ''
submission_access_denied_attributes: { }
previous_submission_message: ''
previous_submissions_message: ''
autofill: false
autofill_message: ''
autofill_excluded_elements: { }
wizard_progress_bar: true
wizard_progress_pages: false
wizard_progress_percentage: false
wizard_progress_link: false
wizard_progress_states: false
wizard_start_label: ''
wizard_preview_link: false
wizard_confirmation: true
wizard_confirmation_label: ''
wizard_auto_forward: true
wizard_auto_forward_hide_next_button: false
wizard_keyboard: true
wizard_track: ''
wizard_prev_button_label: ''
wizard_next_button_label: ''
wizard_toggle: false
wizard_toggle_show_label: ''
wizard_toggle_hide_label: ''
wizard_page_type: container
wizard_page_title_tag: h2
preview: 0
preview_label: ''
preview_title: ''
preview_message: ''
preview_attributes: { }
preview_excluded_elements: { }
preview_exclude_empty: true
preview_exclude_empty_checkbox: false
draft: none
draft_multiple: false
draft_auto_save: false
draft_saved_message: ''
draft_loaded_message: ''
draft_pending_single_message: ''
draft_pending_multiple_message: ''
confirmation_type: page
confirmation_url: ''
confirmation_title: ''
confirmation_message: ''
confirmation_attributes: { }
confirmation_back: true
confirmation_back_label: ''
confirmation_back_attributes: { }
confirmation_exclude_query: false
confirmation_exclude_token: false
confirmation_update: false
limit_total: null
limit_total_interval: null
limit_total_message: ''
limit_total_unique: false
limit_user: null
limit_user_interval: null
limit_user_message: ''
limit_user_unique: false
entity_limit_total: null
entity_limit_total_interval: null
entity_limit_user: null
entity_limit_user_interval: null
purge: none
purge_days: null
results_disabled: false
results_disabled_ignore: false
results_customize: false
token_view: false
token_update: false
token_delete: false
serial_disabled: false
access:
create:
roles:
- anonymous
- authenticated
users: { }
permissions: { }
view_any:
roles: { }
users: { }
permissions: { }
update_any:
roles: { }
users: { }
permissions: { }
delete_any:
roles: { }
users: { }
permissions: { }
purge_any:
roles: { }
users: { }
permissions: { }
view_own:
roles: { }
users: { }
permissions: { }
update_own:
roles: { }
users: { }
permissions: { }
delete_own:
roles: { }
users: { }
permissions: { }
administer:
roles: { }
users: { }
permissions: { }
test:
roles: { }
users: { }
permissions: { }
configuration:
roles: { }
users: { }
permissions: { }
handlers:
test_for_simon:
id: email
handler_id: test_for_simon
label: 'Test for Simon'
notes: ''
status: true
conditions: { }
weight: 0
settings:
states:
- completed
to_mail: simon.hu@opc.com.au
to_options: { }
bcc_mail: ''
bcc_options: { }
cc_mail: ''
cc_options: { }
from_mail: _default
from_options: { }
from_name: _default
reply_to: ''
return_path: ''
sender_mail: ''
sender_name: ''
subject: 'Test for Simon'
body: 'element_key
element_key:format
element_key:raw
element_key:format:items
element_key:delta
element_key:sub_element_key
element_key:delta:sub_element_key
element_key:sub_element_key:format
element_key:delta:sub_element_key:format
element_key:delta:format
element_key:delta:format:html
element_key:entity:*
element_key:delta:entity:*
element_key:delta:entity:field_name:*
element_key:sub_element_key:entity:*
element_key:sub_element_key:entity:field_name:*
element_key:delta:sub_element_key:entity:*
element_key:checked:option_value
element_key:selected:option_value
:clear removes the token when it is not replaced.
:urlencode URL encodes returned value .
:rawurlencode Raw URL encodes returned value with only hex digits.
:xmlencode XML encodes returned value.
:htmldecode decodes HTML entities in returned value.
:striptags
Submitted on [webform_submission:created]
Submitted by: [webform_submission:user]
Submitted values are:
[webform_submission:values]
------------------------------------------------------------------------------------------------------------------------------
[webform_submission:values:sign]
------------------------------------------------------------------------------------------------------------------------------
[webform_submission:values:sign:raw]
[webform_submission:values:sign:format]
[webform_submission:values:sign:value]
------------------------------------------------------------------------------------------------------------------------------
[webform_submission:values:sign:uri]
[webform_submission:values:sign:url]
------------------------------------------------------------------------------------------------------------------------------
[webform_submission:values:sign:clear]
[webform_submission:values:sign:urlencode]
[webform_submission:values:sign:rawurlencode]
[webform_submission:values:sign:xmlencode]
[webform_submission:values:sign:htmldecode]
[webform_submission:values:sign:striptags]
------------------------------------------------------------------------------------------------------------------------------
'
excluded_elements: { }
ignore_access: false
exclude_empty: true
exclude_empty_checkbox: false
exclude_attachments: false
html: true
attachments: false
twig: false
theme_name: ''
parameters: { }
debug: false
variants: { }