在 javascript 中实现 Google Maps API 密钥答案

【问题标题】：Implementing Google Maps API Key in javascript在 javascript 中实现 Google Maps API 密钥
【发布时间】：2017-04-20 08:23:47
【问题描述】：

我正在拼命地尝试将我通过 Javascript 代码创建的地图放在 html 页面上（我不是专业的开发人员，而且我对 javascript 尤其无知）。只要我将 html 文件保存在本地，一切都会运行正常，但是一旦我将它放到网上，地图就不会显示，并且我收到一条关于丢失密钥的消息。

所以我得到了一把钥匙，但我的问题是找到它是如何工作的。我的地图是由以下指令生成的：

map = new google.maps.Map(document.getElementById("map"), options);

我尝试添加此脚本：

script src="https://maps.googleapis.com/maps/api/js?key=#####&callback=initMap" 异步延迟

但是发生的只是更多的错误，并且没有可见的地图。

有人可以帮我吗？提前致谢

【问题讨论】：

请包括您遇到的错误以及您如何将脚本加载到 HTML 页面中的部分。

标签： javascript api maps key

【解决方案1】：

转到google developer console 中的凭据页面，然后在顶部您将看到 域验证 选项卡，单击该选项卡，然后单击按钮 添加域 以添加加载您网站的域。

如果您这样做，您将不需要 API 密钥。多亏了这一点，Google 才能跟踪您的请求。

重要提示

我不确定您是否会遇到这种情况，但请注意，一旦您添加了经过验证的域，请确保之前生成的密钥不会用于 Google 地图的网络服务（如 API），否则 API添加域后会返回错误。

【讨论】：

【解决方案2】：

相反，您应该使用在谷歌地图网站上获得的 iframe。示例：

&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100994.00356082054!2d-121.9805740058651!3d37.71820818113972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fe65cd6892231%3A0x3b327c848ef64057!2sDublin%2C+CA+94568!5e0!3m2!1sen!2sus!4v1480970198759" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;&lt;/iframe&gt;

【讨论】：