Google Maps AutoComplete API - Uncaught TypeError: Cannot read property 'apply' of undefined

Question

I am trying to get the Google AutoComplete API to give the results object to my JavaScript code using the getPlace() function. After doing this, I try to access the result object but am getting the error: Uncaught TypeError: Cannot read property 'apply' of undefined.

Here is my JavaScript console:

js?key=MY_API_KEY&libraries=places&callback=initMap:229 Uncaught TypeError: Cannot read property 'apply' of undefined
at Sf.Oj (js?key=MY_API_KEY&libraries=places&callback=initMap:229)
at Object._.M.trigger (js?key=MY_API_KEY&libraries=places&callback=initMap:225)
at Yf (js?key=MY_API_KEY&libraries=places&callback=initMap:103)
at Yf (js?key=MY_API_KEY&libraries=places&callback=initMap:103)
at E9._.N.set (js?key=MY_API_KEY&libraries=places&callback=initMap:231)
at E9.ni (js?key=MY_API_KEY&libraries=places&callback=initMap:110)
at b (places_impl.js:65)
at places_impl.js:47
at Mu.e [as j] (places_impl.js:28)
at Object.c [as _lphbgh] (common.js:108)

I declared the autocomplete variable outside my function call and my callback function as per the documentation but it is giving me this persistent error. Here is my JavaScript code:

let placesautocomplete;
function initMap() {
    console.log("Google Maps Initialized");
    var input = document.getElementById('Referral_Address');
    placesautocomplete = new google.maps.places.Autocomplete(input, {
        componentRestrictions: { country: ["us", "ca"] },
        fields: ["address_components", "geometry"],
        types: ["address"],
    });
    placesautocomplete.addListener("place_changed", FillInAddress());
}

function FillInAddress() {
    const place = placesautocomplete.getPlace();
    if (place !== undefined) {
        for (const component of place.address_components) {
            const componentType = component.types[0];

            switch (componentType) {
                case "street_number": {
                    address1 = `${component.long_name} ${address1}`;
                    console.log(address1);
                    break;
                }

                case "route": {
                    address1 += component.short_name;
                    break;
                }

                case "postal_code": {
                    postcode = `${component.long_name}${postcode}`;
                    console.log(postcode);
                    break;
                }

                case "postal_code_suffix": {
                    postcode = `${postcode}-${component.long_name}`;
                    break;
                }
                case "locality":
                    document.querySelector("#locality").value = component.long_name;
                    console.log(component.long_name);
                    break;

                case "administrative_area_level_1": {
                    document.querySelector("#state").value = component.short_name;
                    console.log(component.short_name);
                    break;
                }
                case "country":
                    document.querySelector("#country").value = component.long_name;
                    break;
            }
        }
    }
    

}

My goal is to fill in the address once it is autocompleted and display it to the user but I am getting the error every time. I am logging it to the console first to verify it works and then will change it once it is working.

The autocomplete field itself is working fine and fills in accordingly with no issue but this error is preventing my code from grabbing the results from the autocomplete and utilizing them to display to the user.

Any insight is appreciated. Thanks.

Answer 1

Try passing your autocomplete object into the google.maps.event.addListener function and declare your place results there.

google.maps.event.addListener(placesautocomplete, 'place_changed', function () {
        var place = placesautocomplete.getPlace();
        FillInAddress(place);
    });

It may be getting cleared out of memory as it is getting requested.

Answer 2

Remove () after FillInAddress function

placesautocomplete.addListener("place_changed", FillInAddress);