/** * @license * Copyright 2019 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ let autocomplete; let address1Field; let address2Field; let postalField; function initAutocomplete() { address1Field = document.querySelector("#subscriber_address_1"); address2Field = document.querySelector("#subscriber_address_2"); postalField = document.querySelector("#subscriber_zip"); autocomplete = new google.maps.places.Autocomplete(address1Field, { componentRestrictions: { country: ["us", "ca"] }, fields: ["address_components", "geometry"], types: ["address"], }); address1Field.focus(); autocomplete.addListener("place_changed", fillInAddress); } function fillInAddress() { const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; for (const component of place.address_components) { const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "locality": document.querySelector("#subscriber_city").value = component.long_name; break; case "administrative_area_level_1": { document.querySelector("#subscriber_state").value = component.short_name; break; } } } address1Field.value = address1; postalField.value = postcode; address2Field.focus(); } window.initAutocomplete = initAutocomplete;