<!-- Google Map Import -->
<!-- Should be place on the <head> section and need to modify the API key depending on the project -->
<link rel="preload" as="script" href="//maps.googleapis.com/maps/api/js?key=AIzaSyCvWMyTkTt0lMg0hK0PBs3eDt9MDoZevgU&libraries=places&v=3.exp" />
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCvWMyTkTt0lMg0hK0PBs3eDt9MDoZevgU&libraries=places&v=3.exp"></script>
<div class="wrapper">
<div class="grid-container">
<div class="grid-x grid-padding-x gutter">
<div class="large-8 large-offset-2 cell">
<div id="form-address-fields" required class="address-fields">
<div class="spacer"></div>
<div class="grid-x grid-padding-x gutter">
<div class="large-12 medium-12 small-12 cell">
<ins-input address-lookup
label="Search Addresss"
id="form-address-search"
name="address_form"
placeholder="Search Addresss"
icon="icon-map-pin">
</ins-input>
<input type="hidden" form-address-field
id="address_form_address_id"
name="address_form_address_id" />
</div>
<div class="large-6 medium-6 small-12 cell">
<ins-input form-address-field
required validate
label="Address 1*"
id="address_form_address_1"
placeholder="Address 1"
name="address_form_address_1"
value="" >
</ins-input>
</div>
<div class="large-6 medium-6 small-12 cell">
<ins-input form-address-field
label="Address 2"
id="address_form_address_2"
placeholder="Address 2"
name="address_form_address_2"
value="" >
</ins-input>
</div>
<div class="large-6 medium-6 small-12 cell">
<ins-input form-address-field
required validate
label="City*"
id="address_form_city"
placeholder="City"
name="address_form_city"
value="" >
</ins-input>
</div>
<div class="large-6 medium-6 small-12 cell">
<ins-input form-address-field
required validate
label="State*"
id="address_form_state"
placeholder="State"
name="address_form_state"
value="">
</ins-input>
</div>
<div class="large-6 medium-6 small-12 cell">
<ins-input form-address-field
required validate
label="Zip / Postal Code*"
id="address_form_postcode"
placeholder="Zip / Postal Code"
name="address_form_postcode"
value="" >
</ins-input>
</div>
<div class="large-6 medium-6 small-12 cell">
<ins-input form-address-field
required validate
label="Country*"
id="address_form_country"
placeholder="Country"
name="address_form_country"
value="">
</ins-input>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note:
- Utilise the google map API key from the Instance admin console.
- In order to run this you need to import a google map api script in your head section like this
let addressValueChanged = false;
var AddressLookup = (function () {
// google address lookup field
let searchAddressElement;
return {
methods: {
fillAddress(field, type) {
let address = field.getPlace();
AddressLookup.methods.resetAddress(type);
AddressLookup.methods.unselectAddressCards(type);
if (address && address.address_components) {
AddressLookup.methods.mapGoogleAddress(address.address_components, type);
addressValueChanged = true;
}
},
resetAddress(type) {
let addressField = document.querySelectorAll(`[${type}-address-field]`);
for (let i = 0; i < addressField.length; i++) {
addressField[i].value = "";
}
},
unselectAddressCards(type) {
let cards = document.querySelectorAll(`ins-checkbox-card[name="${type}-address-cards"]`);
cards.forEach(el => {
el.classList.remove('is-invalid');
el.removeAttribute('selected');
el.selected = false;
});
},
mapGoogleAddress(address, name) {
address.forEach(item => {
let addressType = item.types[0];
// Update fields as needed on project.
switch (addressType) {
case "street_number":
document.getElementById(`${name}_address_1`).value = item['short_name'] + " ";
break;
case "premise":
document.getElementById(`${name}_address_1`).value = item['long_name'] + " ";
break;
case "route":
document.getElementById(`${name}_address_1`).value += item['long_name'] + " ";
break;
case "neighborhood":
document.getElementById(`${name}_address_2`).value += item['long_name'] + " ";
break;
case "sublocality_level_1":
document.getElementById(`${name}_address_2`).value += item['long_name'] + " ";
break;
case "locality":
if (address.length > 7 &&
address.length < 9 &&
address[6].long_name !== "Canada") {
document.getElementById(`${name}_address_2`).value += item['long_name'] + " ";
} else document.getElementById(`${name}_city`).value = item['long_name'] + " ";
break;
case "postal_town":
document.getElementById(`${name}_city`).value += item['long_name'];
break;
case "administrative_area_level_2":
if (address.length <= 7) {
// document.getElementById(`${name}_suburb`).value = item['long_name'] + " ";
document.getElementById(`${name}_state`).value = item['long_name'] + " ";
} else document.getElementById(`${name}_state`).value = item['long_name'] + " ";
break;
case "administrative_area_level_1":
if (address.length < 8)
document.getElementById(`${name}_state`).value += item['short_name'];
else
document.getElementById(`${name}_city`).value += item['short_name'];
break;
case "country":
document.getElementById(`${name}_country`).value = item['long_name'];
// document.getElementById(`${name}_country_code`).value = item['short_name'];
break;
case "postal_code":
case "postal_code_prefix":
document.getElementById(`${name}_postcode`).value = item['short_name'];
break;
}
});
}
},
events: {
initGoogleAddressLookup: function () {
let lookupFields = document.querySelectorAll('[address-lookup]');
for(let i = 0; i < lookupFields.length; i++) {
searchAddressElement = lookupFields[i];
searchAddressElement.addEventListener('didLoad',
this.initEventListeners(searchAddressElement));
}
},
initEventListeners: function (field) {
let name = field.getAttribute('name');
let setStateInterval = setInterval(() => {
let lookupField = field.querySelector('input');
if (lookupField && google !== undefined) {
// Initialize google autocomplete on field
let searchAddressField = new google.maps.places.Autocomplete(lookupField);
// Set initial restrict to the listed countries
searchAddressField.setComponentRestrictions({ country: ["au"] });
// Fill address event
searchAddressField.addListener('place_changed', (event) => {
AddressLookup.methods.fillAddress(searchAddressField, name);
});
clearInterval(setStateInterval);
}
}, 300);
},
}
}
})();
// Initialize on window load
window.AddressLookup = AddressLookup;
// Set timeout, make sure INS components has been loaded
setTimeout(() => {
AddressLookup.events.initGoogleAddressLookup();
}, 200);