带有角度+ javascript的谷歌地图错误答案

【问题标题】：Google map error with angular + javascript带有角度+ javascript的谷歌地图错误
【发布时间】：2018-07-16 15:16:55
【问题描述】：

我不太擅长 Angular 和 Javascript。我想在本地运行一个使用谷歌地图的现有应用程序。

页面加载，并应显示地图。但我得到了这些错误：

js?v=3&callback=angular2GoogleMapsLazyMapsAPILoader:42 Google Maps API error: MissingKeyMapError 
https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
_.Hb @ js?v=3&callback=angular2GoogleMapsLazyMapsAPILoader:42
(anonymous) @ common.js:54
(anonymous) @ common.js:152
c @ common.js:48
(anonymous) @ AuthenticationService.Authenticate?1shttp%3A%2F%2F167.99.133.34%3A4200%2F%23%2Fpages%2Fgyms%2Fadd&callback=_xdc_._hrm6mx&token=23882:1
util.js:228 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

我今天生成了新的 API 密钥，但由于它是一个 Angular 库，我不知道该放在哪里。

在我的 chrome 调试器中，我可以看到我的错误可能来自这个调用

"js?v=3&callback=angular2GoogleMapsLazyMapsAPILoader:64"


 <script type="text/javascript" async="" defer="" 
    src="https://maps.googleapis.com/maps/api/js? 
    v=3&amp;callback=angular2GoogleMapsLazyMapsAPILoader"></script>

您对此有什么想法吗？

【问题讨论】：

maps.googleapis.com 需要一个 key 参数
是的，但是放在哪里，因为我无权访问这些文件（ common.js ）我认为是库的内部文件
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"。你甚至可以使用这个简单的 angularjs 地图插件库来简化你的代码github.com/allenhwkim/angularjs-google-maps
从 2018 年 6 月 11 日开始 ... 无法使用没有密钥的谷歌地图 .. 此错误与您没有谷歌地图密钥且谷歌政策已更改的 fatc 有关。

标签： javascript angular google-maps google-maps-api-3

【解决方案1】：

请试着把这个 <script src="https://maps.googleapis.com/maps/api/js?key=yourKeyIsHere&libraries=places" async defer></script>

进入 Angular 项目：index.html

【讨论】：