I used Google Map API to get the city name, state, and country using the Postal zip code on my site. Google Address Autocomplete is working fine. But I don't need the autocomplete. Just I give the zip code and click the button, and it provides the address.

I faced the issue is TypeError: Cannot read properties of undefined (reading 'activeElement')

My code is very simple

<input type = "text" id="deliverTo" name="deliverTo" value = ""/>
<input type ="button" value ="Get Address" name ="Submit" onclick = "getcoastalzip()" />

<input type = "text" id = "ship_city"  name ="ship_city" Placeholder="City" />
<input type = "text" id = "ship_state"  name ="ship_state" Placeholder="State" />
<input type = "text" id = "ship_country"  name ="ship_country" Placeholder="Country" />
<input type = "text" id = "ship_postal_code"  name ="ship_postal_code" Placeholder="Postal Code" />
<script src="https://maps.google.com/maps/api/js?key=APIKEY=places" type="text/javascript"></script>

<script>
function getcoastalzip() {
    var input = document.getElementById('deliverTo').value;
    
    alert(input);
    

    var autocomplete = new google.maps.places.Autocomplete(input);
    console.log(autocomplete);
        autocomplete.addListener('place_changed', function() {
     

     
       var place = autocomplete.getPlace();
   
   console.log(place);
    
    console.log(place['address_components'][0]['long_name']);
    console.log(place['address_components'][1]['long_name']);
    document.getElementById('ship_city').value = place['address_components'][1]['long_name'];
    document.getElementById('ship_state').value = place['address_components'][2]['long_name'];
    document.getElementById('ship_postal_code').value = place['address_components'][0]['long_name'];
     document.getElementById('ship_country').value = place['address_components'][3]['long_name'];

   
});
 }
</script>