React项目中Google Maps/Places API报InvalidKeyMapError求助

API 探路者

2026-6-18

解决React中使用Google Maps/Places API的InvalidKeyMapError错误

核心问题分析与修复步骤

HTML中环境变量引用错误
你在index.html的script标签里直接写了VITE_GOOGLE_PLACE_API_KEY，但Vite在HTML文件中引用环境变量需要用%变量名%的格式，否则浏览器会把这个字符串当成密钥本身，导致无效。
修正后的script标签：
```
<script src="https://maps.googleapis.com/maps/api/js?key=%VITE_GOOGLE_PLACE_API_KEY%&libraries=places"></script>
```

GooglePlacesAutocomplete组件的props传递错误
你把apiKey作为组件的子元素传递了，这不符合React组件的props传递规则，应该把它作为组件的属性直接传入：
修正后的组件代码：

return (
  <SectionWrapper id={'generate'} header="Generate your Dream Trip" title={["Tell us your", "Travel","Preferences"]}>
    <Header index={'01'} title={'Pick a destination'} />
    <GooglePlacesAutocomplete 
      className='bg-slate-950 border border-solid border-orange-400'
      apiKey={import.meta.env.VITE_GOOGLE_PLACE_API_KEY}
    />
  </SectionWrapper>
)

额外验证项（即使密钥正确也要检查）
- 确认Google Cloud控制台中，你的API密钥已经启用了Maps JavaScript API和Places API
- 检查密钥的应用限制设置：如果设置了HTTP referrers，确保当前开发/生产环境的域名在允许列表中（本地开发可以暂时用localhost:*或127.0.0.1:*测试）