2024 Updated: For Surveys – GHL Address AutoComplete Script

Hello, fellow go-high level enthusiasts! We’ve got some exciting news for you today. After receiving an overwhelming number of requests, we are thrilled to present the latest update to the GHL Address AutoComplete Script.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<YOURAPIKEY>&libraries=places"></script>
<script>
function attachAutocompleteToElement(querySelector) {
    console.log("loaded buddy!");
    let inputElement = document.querySelector(querySelector);
    if (inputElement) {
        let autocomplete = new google.maps.places.Autocomplete(inputElement, { types: ['geocode'] });
        autocomplete.setFields(['address_components']);

        autocomplete.addListener('place_changed', function() {
            let place = autocomplete.getPlace();

            let streetNumber = '';
            let streetName = '';
            let city = '';
            let state = '';
            let country = '';
            let zipcode = '';

            for (let i = 0; i < place.address_components.length; i++) {
                let component = place.address_components[i];
                switch (component.types[0]) {
                    case 'street_number':
                        streetNumber = component.long_name;
                        break;
                    case 'route':
                        streetName = component.long_name;
                        break;
                    case 'locality':
                        city = component.long_name;
                        break;
                    case 'administrative_area_level_1':
                        state = component.short_name;
                        break;
                    case 'country':
                        country = component.long_name;
                        break;
                    case 'postal_code':
                        zipcode = component.long_name;
                        break;
                }
            }

document.querySelector('input[name="address"]').value = streetNumber + ' ' + streetName;
document.querySelector('input[name="address"]').dispatchEvent(new Event('input'))

document.querySelector('input[name="city"]').value = city;
document.querySelector('input[name="city"]').dispatchEvent(new Event('input'))

document.querySelector('input[name="state"]').value = state;
document.querySelector('input[name="state"]').dispatchEvent(new Event('input'))

document.querySelector('input[name="postal_code"]').value = zipcode;
document.querySelector('input[name="postal_code"]').dispatchEvent(new Event('input'))

document.querySelector('input[name="country"]').value = country;
document.querySelector('input[name="country"]').dispatchEvent(new Event('input'))


        });
    } else {
        console.error("Element with ID " + querySelector + " not found.");
    }
}

function tryAttachAutocomplete(querySelector, retries = 3) {
    if (retries <= 0) {
        console.error("Failed to attach autocomplete after 3 attempts.");
        return;
    }

    let inputElement = document.querySelector(querySelector);
    if (inputElement) {
        attachAutocompleteToElement(querySelector);
    } else {
        console.warn(`Attempt failed. Retrying in 4000ms. Retries left: ${retries - 1}`);
        setTimeout(() => {
            tryAttachAutocomplete(querySelector, retries - 1);
        }, 4000);
    }
}

let querySelector = 'input[name="address"]';
tryAttachAutocomplete(querySelector, 6);


let currentURL = window.location.href;

setInterval(function() {
    if (currentURL !== window.location.href) {
        let querySelector = 'input[name="address"]';
        tryAttachAutocomplete(querySelector, 6);
        currentURL = window.location.href;
    }
}, 100); 

console.log('routechange2.js loaded!');
</script>