Google Maps address autofill Error: Cannot read property 'length' of undefined

Question

I am facing an issue. I am using the google maps api address auto fill. When i run the sample code provided by the google it works fine. But when i use it in my application It works fine for small input like which have small country, city name. But when i use it for long inputs it gave this error on console.

new:1381 Uncaught TypeError: Cannot read property 'length' of undefined 

When i click on link it take me to this piece of code.

for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            var valShort  =place.address_components[i].short_name;
            document.getElementById(addressType).value = val;
        }
    }

Here is the code:

<script>

    var placeSearch, autocomplete;
    var componentForm = { 

        locality: 'long_name',
        administrative_area_level_1: 'long_name',
        country: 'long_name',    
    };    

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
                {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {

                var val = place.address_components[i][componentForm[addressType]];
                var valShort  =place.address_components[i].short_name;
                document.getElementById(addressType).value = val;
            }
        }
    }  

</script>

Answer 1

You need to check whether address_components is there or not.

As per the Autocomplete class reference:

If the user enters the name of a Place that was not suggested by the control and presses the Enter key, or if a Place detail request fails, a place_changed event will be fired that contains the user input in the name property, with no other properties defined.

So you need to handle the case when the event is fired but the place you get back has nothing but a name. One way to deal with this is by falling back on sending a Geocoding or Place Text Search request. Geocoding is enough for addresses, but if you also want to find businesses, you'll need Places Text Search.