修复糟糕出了点问题！在谷歌地图 API答案

【问题标题】：Fix Oops Something Went Wrong! In google maps api修复糟糕出了点问题！在谷歌地图 API
【发布时间】：2017-02-24 12:34:56
【问题描述】：

在我的网站上：http://www.ilovefooddreams.com/eligibility 我有一张谷歌地图，突然间它现在说。

“糟糕！出了点问题。此页面未加载 Google 地图正确。有关技术详情，请参阅 JavaScript 控制台。”

我到处寻找我能找到的地方，他们说要获得一个 API 密钥。我已经连接了一个，但它仍然无法正常工作。

这里是代码

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


</body>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&libraries=places&callback=initialize"

    async defer>
</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>



</html>

我该如何解决这个问题？

谢谢！

【问题讨论】：

标签： javascript html css google-maps

【解决方案1】：

您网站上当前的版本在 javascript 控制台中报告 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error。` 因为在包含 API 的页面上没有密钥（它与您在问题中发布的不同）：

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

【讨论】：

【解决方案2】：

脚本中有一个回调引用了一个名为initMap 的函数。您需要将其更新为initialize

<div id="googleMap" style="width:1030px;height:380px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&callback=initialize" async defer></script>
<script>
function initialize()
{
var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
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);
}

</script>

JSFiddle

确保在回调处理此问题时删除侦听器。

【讨论】：

我刚刚尝试将链接更改为maps.googleapis.com/maps/api/…，但仍然无法正常工作。有其他解决方案吗？
确保脚本在正文之后加载。不是头。我添加了一个有效的 JSFiddle
我刚刚更新了它，它仍然无法正常工作。我更新了我的问题中的代码。你知道问题所在吗？
控制台说什么？
Google chrome 无法在我的 Mac 上运行。你能帮我找到吗？谢谢！