模态框中Google API自动补全功能失效问题排查

使用技术：ColdFusion、jQuery

遇到的错误信息：

Uncaught ReferenceError: google is not defined
at initAutocomplete

我在尝试将Google Places API集成到模态框时触发了上述错误，当前涉及两个文件：

1. 包含模态框的父文件，其中引入了Google API脚本：

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete&language=it&output=json&key=MYKEY" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

2. 模态框独立文件，包含以下JavaScript代码：

let autocomplete;
let address1Field;
let address2Field;
let postalField;

function initAutocomplete() {
    let getnazione =  document.querySelector("##nazione");
    let setdefaultnation = $( "##nazione" ).val();
    address1Field = document.querySelector("##indirizzo");
    address2Field = document.querySelector("##citta");
    postalField = document.querySelector("##cap");

    $('##nazione').on('select2:select', function () {
        console.log("ciao");
        console.log(getnazione.value);
        autocomplete.setComponentRestrictions({ country: [getnazione.value] });

    });
    
    autocomplete = new google.maps.places.Autocomplete(address1Field, {
        componentRestrictions: { country: [setdefaultnation] },
        fields: ["address_components", "name"],
        types: ["address"],
    });
    /* address1Field.focus(); */
    // 当用户从下拉列表选择地址时，填充表单中的地址字段
    autocomplete.addListener("place_changed", fillInAddress );
}

function fillInAddress() {
    // 从自动完成对象中获取地点详情
    const place = autocomplete.getPlace();
    let indirizzo = "";
    let cap = "";
    let civicnumber="";

    // 从地点详情中提取地址的各个部分，然后填充表单对应的字段
    for (const component of place.address_components) {
        const componentType = component.types[0];

        switch (componentType) {
            case "street_number": {
                civicnumber = `${component.long_name}`;                 
                break;
                
            }
            case "route": {
                indirizzo_corto = component.short_name;
                indirizzo_lungo = component.long_name;
                indirizzo += component.long_name;
                break;
            }
    
            case "postal_code": {
                cap = `${component.long_name}${cap}`;
                break;
            }
    
            case "locality":
                document.querySelector("##citta").value = component.long_name;
                break;
    
            case "administrative_area_level_2": {
                document.querySelector("##prov").value = component.short_name;
                $('##prov').trigger('change');
                break;
            }
                
            case "administrative_area_level_1": {
                document.querySelector("##stato_usa").value = component.short_name;
                $('##stato_usa').trigger('change');
                break;
            }
        }
    }
    
    if(civicnumber != ""){
        $("##civicnumberalert").addClass("d-none");
        /* address1Field.value = indirizzo+", "+civicnumber; */
    }
    else{
        /* address1Field.value = indirizzo; */
        $("##civicnumberalert").removeClass("d-none");
    }
    
    indirizzo_nome = place.name.replace(indirizzo_corto,indirizzo_lungo);
    address1Field.value = indirizzo_nome;
    
    postalField.value = cap;
    /* address2Field.focus(); */
}

window.initAutocomplete = initAutocomplete;


document.getElementById("form_sped").onkeypress = function(e) {
    var key = e.charCode || e.keyCode || 0;      
    if (key == 13) {
        e.preventDefault();
    }
} 

我怀疑问题根源是两个文件存在重复的API调用，但不确定。已经尝试过调整脚本加载顺序、在单文件/双文件中分别引入脚本，还移除了async属性，但错误依然存在。

内容的提问来源于stack exchange，提问作者Andrea Chiari