糟糕！有些不对劲。此页面未正确加载Google地图。有关技术详细信息，请参阅JavaScript控制台。

**

有谁知道出了什么问题？这是我的代码：

{% extends "base.html" %}

{% block header_class %}header-expanded slidepanel top
{% endblock %}
{% block header_content %}
  {{ super() }}

<div style="image-align:left;">
<h2 class="heading h-section" data-barley="index_heading"style="color:black" data-barley-editor="simple">You are eligible for delivery at any address within this circle.</h2>
 </div>

<!DOCTYPE html>
<html>
<head>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&callback=initMap">
</script>

<script>

var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
function initialize()
{
var mapProp = {
  center:amsterdam,
  zoom:13,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:3000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });

myCity.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<body>
<div id="googleMap" style="width:1030px;height:380px;"></div>


</body>
</html>



   {% endblock %}

感谢您的帮助！

Answer 1

您似乎没有API密钥。

就在你的代码中：

<script src="https://maps.googleapis.com/maps/api/js"></script>

缺少一些东西。它应该是这样的：

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

您将在获取API密钥之后的本文档中获取API密钥 https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de

或 https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en（英文）

然后在上面的链接和你的全部设置中添加它！

Answer 2

打开开发工具并检查控制台显示错误：Google Maps API error: MissingKeyMapError。还提供了警告的链接，在这种情况下也与缺少的API密钥NoAPIKeys相关。

仔细检查并确保您拥有Google Maps API密钥。如果您没有，请检查here，然后在加载脚本时，请务必指定上一个链接提供的示例中的API：<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

Google Maps API无法加载？

糟糕！有些不对劲。此页面未正确加载Google地图。有关技术详细信息，请参阅JavaScript控制台。

2 个答案: