Question

在我的网站上：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>

我该如何解决这个问题？

谢谢！

Answer 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>

Answer 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

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

修复哎呀错了！在谷歌地图api

2 个答案: