谷歌地图加载失败

Posted 2023-02-23

【中文标题】谷歌地图加载失败

【英文标题】：Google map failed to load

【发布时间】：2018-04-08 16:29:11

【问题描述】：

我需要在我的网页中集成一个谷歌地图。我生成了一个 API。但是地图没有显示。我正在本地服务器上对其进行测试。

<h3>My Google Maps Demo</h3>
<div id="map">
    <span class="labels">Heading</span>
</div>
<script  src="https://maps.googleapis.com/maps/api/js?key=[API]&callback=initMap">
</script>
<script type="text/javascript">
    function initMap() 
                alert("Yes");
                var uluru =  lat: -25.363, lng: 131.044 ;
                var map = new google.maps.Map(document.getElementById('map'), 
                    zoom: 4,
                    center: uluru
                );
                var marker = new google.maps.Marker(
                    position: uluru,
                    map: map
                );
            
</script>

但没用。他们在我的代码中有什么问题吗？我可以检查我的 API 是否正常工作

【问题讨论】：

原谅我的无礼，但那不是JS，不是C#吗？

@john Java != JavaScript。哦等等……也许他认为 C# 是 Java，Java 是 JavaScript！

【参考方案1】：

我无法评论，所以我写在这里。 有钥匙密码吗？

在控制台中，有错误：

RefererNotAllowedMapError 错误 当前加载 Google Maps JavaScript API 的 URL 尚未添加到允许的引荐来源列表中。请在 Google API 控制台上检查您的 API 密钥的引用设置。

在 Google API 控制台中查看 API 密钥。有关详细信息，请参阅安全使用 API 密钥的最佳做法。

也许this 会帮助你。

【讨论】：

是的，我有。我生成了它

【参考方案2】：

另外，initMap 将在页面加载时被调用，并且可能在它被调用的时候没有被声明？

【参考方案3】：

您需要有 api 密钥才能访问地图。像这样修改你的代码：

JS：

 function initMap() 
   alert("Yes");
   var uluru = 
     lat: -25.363,
     lng: 131.044
   ;
   var map = new google.maps.Map(document.getElementById('map'), 
     zoom: 4,
     center: uluru
   );
   var marker = new google.maps.Marker(
     position: uluru,
     map: map
   );

 
 google.maps.event.addDomListener(window, "load", initMap);

查看此演示：http://jsfiddle.net/lotusgodkk/hLenqzmy/64/

您可以从这里获取 api 密钥：https://developers.google.com/maps/documentation/javascript/get-api-key

【讨论】：

我生成了一个 api 密钥，例如 AIzaSyBLM2.............MrhsuACbI 并在代码中替换它，但它不起作用

在控制台中发现错误为加载资源失败：服务器响应状态为 404（未找到）

演示正在运行，但在我的本地发现一个错误为 Uncaught ReferenceError: google is not defined

让我们continue this discussion in chat.

【参考方案4】：

您的代码运行良好。 您需要在那里放置一个 JavaScript Google API（我猜您放置了另一个 Google Maps Key）

还可以查看this 链接以获取一些谷歌示例