Google Maps JavaScript API自动补全组件出错时，如何启用普通输入？

问题背景 #

使用Google Maps JavaScript API的Autocomplete组件时，当API出现错误（比如无效密钥），输入框会在用户输入数秒后被禁用，最终状态如下：

<input class="form-textbox pac-target-input gm-err-autocomplete" id="PatientStreet" name="PatientStreet" placeholder="Oops! Something went wrong." type="text" value="" autocomplete="off" disabled="" style="background-image: url(&quot;https://maps.gstatic.com/mapfiles/api-3/images/icon_error.png&quot;);">

现有代码 #

JavaScript代码 #

const patientStreet = document.getElementById('PatientStreet');

const componentForm = {
    street_number: 'short_name',
    route: 'short_name', // 街道名称
    locality: 'long_name', // 城市
    administrative_area_level_3: 'long_name', // 县
    administrative_area_level_1: 'long_name', // 州
    postal_code: 'short_name',
    subpremise: 'short_name' // 公寓号
};

function initAutoComplete() {
    autocomplete = new google.maps.places.Autocomplete(patientStreet,
        {
            types: ['address'],
            componentRestrictions: { 'country': 'us' },
            fields: ['address_components']
        });

    googleAutoCompleteEventListener = autocomplete.addListener('place_changed', onPlaceChanged);
}

function onPlaceChanged() {
    const place = autocomplete.getPlace();
    // 将地址组件填入对应输入框的逻辑
}

HTML代码 #

<form>
<input class="form-textbox" id="PatientStreet" name="PatientStreet" placeholder="123 Main Street" type="text" value="" autocomplete="off">
</form>

<script src="https://maps.googleapis.com/maps/api/js?key=invalidKey&libraries=places&region=US&callback=initAutoComplete" async defer></script>

已尝试的方法 #

添加了gm_authFailure回调函数，并保存了监听器变量：

function gm_authFailure() {
    google.maps.event.removeListener(googleAutoCompleteEventListener);
    google.maps.event.clearInstanceListeners(patientStreet);
}

let googleAutoCompleteEventListener;
function initAutoComplete() {
  autocomplete = new google.maps.places.Autocomplete(patientStreet,
      {
          types: ['address'],
          componentRestrictions: { 'country': 'us' },
          fields: ['address_components']
      });

  googleAutoCompleteEventListener = autocomplete.addListener('place_changed', onPlaceChanged);
}

但输入框依然会被禁用并显示错误图标。

需求 #

如何配置才能在Autocomplete API出错时，让用户仍能正常输入地址并提交表单？

解决方案 #

Google API的错误处理逻辑会自动修改输入框的状态，仅移除监听器无法恢复输入功能，需要在gm_authFailure中手动重置输入框的属性和样式：

1. 完善gm_authFailure函数

function gm_authFailure() {
    // 清理Autocomplete相关监听器
    if (googleAutoCompleteEventListener) {
        google.maps.event.removeListener(googleAutoCompleteEventListener);
    }
    google.maps.event.clearInstanceListeners(patientStreet);
    
    // 恢复输入框可用状态
    patientStreet.disabled = false;
    // 还原原始占位符
    patientStreet.placeholder = '123 Main Street';
    // 移除API添加的错误样式类和背景图
    patientStreet.classList.remove('gm-err-autocomplete');
    patientStreet.style.backgroundImage = '';
    // 销毁Autocomplete实例（避免后续API操作干扰）
    if (autocomplete) {
        autocomplete.unbindAll();
        autocomplete = null;
    }
}

2. 确保gm_authFailure全局可访问
   该函数必须定义在全局作用域中，不能被包裹在任何局部作用域（比如IIFE）内，否则Google API无法触发这个回调。

3. 添加DOM监听做兜底
   如果API后续仍有隐藏的状态修改，可以用MutationObserver监听输入框属性变化，强制保持输入框可用：

// 监听输入框属性变化，防止被禁用
const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        if (mutation.attributeName === 'disabled' && patientStreet.disabled) {
            patientStreet.disabled = false;
        }
    });
});
observer.observe(patientStreet, { attributes: true });

通过以上步骤，就能保证在Autocomplete API出错时，输入框保持可用，用户可以正常输入地址并提交表单。

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