谷歌地图 API 没有加载？答案

【问题标题】：Google Maps API isn't loading?谷歌地图 API 没有加载？
【发布时间】：2016-12-04 21:22:28
【问题描述】：

在我的网站上：http://www.ilovefooddreams.com/eligibility 地图工作正常，但现在突然显示：

哎呀！出问题了。此页面未正确加载 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 %}

感谢您的帮助！

【问题讨论】：

您当前使用的密钥似乎不存在：js?key=AIzaSyDyUno31jMgeeK3TDsrlcBmKsfn4hchg&callback=initMap:Google Maps API 错误：InvalidKeyMapError developers.google.com/maps/documentation/javascript/…
它存在....看：imgur.com/a/BIBcN 这是关键：AIzaSyDy_Uno31jMgeeK3TDsrlcBmKsfn4hc-hg @kaskader
@kaskader 你知道发生了什么吗？
您在页面上缺少破折号和下划线

标签： javascript html css google-maps google-api

【解决方案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（英文）

然后将其添加到上面的链接中并设置好！

【讨论】：

我收到一条错误消息，提示 InitMap 不是函数。这是为什么呢？
我该怎么办？ @TheWeeezel
我添加了密钥并带走了异步延迟...谢谢！

【解决方案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>

【讨论】：

您有没有可以为我制作的示例，包括我列出的所有代码，我只需要使用我的 API 密钥进行切换吗？这会很有帮助！
我按照你说的做了，但是控制台说 INITMAP 不是一个函数。你知道如何解决这个问题吗？ @斯蒂芬