Google Places Autocomplete无法使用，提示initAutocomplete不是函数

错误1："initAutocomplete is not a function" #

原因 #

Google Maps脚本加载时，会全局查找你指定的callback函数，但React组件内部定义的函数默认是局部作用域，脚本找不到它。

解决方法 #

1. 把函数挂载到全局window对象：在组件内将初始化函数赋值给window.initAutocomplete，确保脚本能找到它。
2. 严格匹配函数名和callback参数：脚本URL里的callback=xxx必须和你的函数名完全一致，大小写也不能错。

错误2："google is undefined" #

原因 #

移除callback或用useEffect时，依赖google对象的代码在脚本还没加载完成就执行了，导致找不到全局的google变量。

解决方法 #

推荐用动态加载脚本+onload事件的方式，确保脚本加载完成后再初始化Autocomplete：

代码示例（React组件）

import { useEffect, useRef, useState } from 'react';

function LocationForm() {
  const inputRef = useRef(null);
  const [city, setCity] = useState('');
  const [province, setProvince] = useState('');

  useEffect(() => {
    // 动态创建并加载Google Places脚本
    const script = document.createElement('script');
    // 替换成你的API密钥，必须启用Places API
    script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places`;
    script.async = true;
    script.defer = true;

    script.onload = () => {
      // 脚本加载完成后初始化Autocomplete
      if (!inputRef.current || !window.google) return;

      const autocomplete = new window.google.maps.places.Autocomplete(
        inputRef.current,
        { types: ['(cities)'] } // 限制仅搜索城市类地点
      );

      // 监听用户选择地点的事件
      autocomplete.addListener('place_changed', () => {
        const place = autocomplete.getPlace();
        // 从地址组件中提取城市和省份
        const cityComp = place.address_components.find(comp => comp.types.includes('locality'));
        const provinceComp = place.address_components.find(comp => comp.types.includes('administrative_area_level_1'));
        
        setCity(cityComp?.long_name || '');
        setProvince(provinceComp?.long_name || '');
      });
    };

    document.body.appendChild(script);

    // 组件卸载时移除脚本，避免内存泄漏
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="location-form">
      <div>
        <label>城市：</label>
        <input ref={inputRef} type="text" placeholder="输入城市名称" />
      </div>
      <div>
        <label>省份：</label>
        <input type="text" value={province} readOnly placeholder="自动填充省份" />
      </div>
    </div>
  );
}

export default LocationForm;

常见排查要点 #

• 检查API密钥配置：确保Google Cloud控制台里已经启用了「Places API」，并且密钥没有设置错误的IP/域名限制。
• 必须添加libraries=places：脚本URL里必须包含libraries=places，否则无法使用Autocomplete功能。
• 确保DOM节点已挂载：必须用useRef获取输入框的DOM节点，不能在组件挂载前直接通过document.getElementById获取，否则会拿到null。
• 避免重复加载脚本：如果用动态加载方式，记得在组件卸载时移除脚本，防止多次加载导致冲突。

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