google-maps - 用于本地主机和生产服务器的 Google Maps API，截至 2019 年 4 月

Question

TLDR

当以 file://<path>/index.html 访问时，我的代码在我的笔记本电脑上运行良好，但在我的笔记本电脑上运行的 Apache 服务器在以 http://<path>/index.html 访问时都没有，也不是在我的真实(生产)服务器上。我在控制台上看不到任何错误，但 map 只是一个灰色矩形。

自从我编写任何 Google map 应用程序以来，已经有好几年了。

似乎从去年开始，现在有必要拥有一个 API key ，通过向其提供信用卡详细信息，并为每个 API 调用提供它。

不幸的是，有 很多关于这方面的信息，大部分/大部分已经过时和/或相互矛盾。

谁能指出如何配置它的规范指南，最好是带有屏幕截图的？

我想画一张 map ，并添加一些制造商，这将需要反向地理编码，以便我提供街道地址并将其转换为纬度/经度以放置标记。

听起来很简单，但在成千上万的“有用”网站中，哪一个做得对？

例如，似乎是 the current Google help page谈到

From the Navigation menu, select APIs & Services > Credentials.
On the Credentials page, click Create credentials > API key

但我什至看不到那个菜单选项:-(

[更新] 如果有帮助，开发者控制台中的错误消息说:

Geocoding Service: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

[更新] 我正在尝试像这样访问 API

<script src="maps.google.com/maps/api/…>

和

var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + comapnyLocation +'&key=XXXX'; 

$http.get(url)

[更新++] 在开发人员控制台中，我看到了一堆错误:

aliextension.com/wp-content/uploads/2017/08/JAR.png:1 GET https://aliextension.com/wp-content/uploads/2017/08/JAR.png net::ERR_CONNECTION_TIMED_OUT

我不知道是什么aliextension是，也没有出现在我的代码中(也许在一些缩小的 JS 中？)

好吧，和速卖通(阿里巴巴)有关。我删除了它并且超时消息消失了，但我仍然有问题。

如果我加载 index.html作为 file:// 进入 Chrome ，那么它工作得很好。但是，如果我以 http://的形式加载它，我运行 Xampp Apache 服务器， map 框仍然是灰色的，尽管我没有看到任何错误消息。同样的事情发生在我的真实服务器上:-(

Answer 1

此页面应该是您的起点:
https://developers.google.com/maps/documentation/javascript/tutorial
它可以帮助您使用 Google map JavaScript API。

要将谷歌地图嵌入到您的网站，请阅读上述链接中的概览页面。

要将标记添加到您的谷歌地图，请阅读此页面:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

要进行反向地理编码，请阅读此页面:
https://developers.google.com/maps/documentation/javascript/geocoding

我只需要使用谷歌地图。我想你也可以这样做。