Google Maps JavaScript API 错误：InvalidKeyMapError答案

【问题标题】：Google Maps JavaScript API error: InvalidKeyMapErrorGoogle Maps JavaScript API 错误：InvalidKeyMapError
【发布时间】：2022-10-22 17:10:56
【问题描述】：

[REE]错误登录控制台1

即使在插入 api 密钥后谷歌地图也不会加载

code

【问题讨论】：

标签： reactjs dictionary google-maps

【解决方案1】：

如果您在实现中收到InvalidKeyMapError 作为错误，这意味着根据Error Messages documentation 找不到加载API 的脚本元素中包含的API 密钥。请确保您使用的是正确的 API 密钥。

为了便于查看，下面是您的 Maps JavaScript API 的 script 标记，您的 API 密钥应包含在该标记中：

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

您的 API 密钥应附加在 key 参数之后。Reference

【讨论】：

【解决方案2】：

首先，您必须有一个 maps api 有效令牌，创建一个新项目并获取凭据，来自

https://console.cloud.google.com/google/maps-apis/credentials

您必须添加您的信用卡，以进行验证。他们将从您的帐户中收取 0.00 美元，以验证您的身份，而不是机器人脚本。

如果您没有获得有效的地图密钥，您将进入浏览器控制台

Google Maps JavaScript API error: InvalidKeyMapError

在 ReactGoogleAutocomplete 项目中：

npm i react-google-autocomplete

在 .env 中的 FE 中创建：

REACT_APP_GOOGLEPLACES_API_KEY=your_valid_maps_key

修改 .env 文件后重新启动项目。

在您使用 Google Maps MyComponent.js 的组件内部，添加顶部

常量配置 = process.env.REACT_APP_GOOGLEPLACES_API_KEY; const [位置，setLocation] = useState("");

然后在 return() 中添加这个 Maps 组件

<ReactGoogle自动完成 className="表单控件 m-2" 占位符="位置" apiKey={配置} onPlaceSelected={(地点) => { setLocation(place.formatted_address); }} 样式={{高度：“50px”}} />

在该组件的底部，您可以看到结果。

{JSON.stringify({location}, null, 4)}

【讨论】：