哎呀！出问题了。此页面未正确加载 Google 地图。有关技术细节，请参阅 JavaScript 控制台答案

【问题标题】：Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details哎呀！出问题了。此页面未正确加载 Google 地图。有关技术细节，请参阅 JavaScript 控制台
【发布时间】：2016-06-02 23:44:01
【问题描述】：

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

不知道为什么

API error: RefererNotAllowedMapError

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap"
    async defer></script>
  </body>
</html>

【问题讨论】：

1.单击 [► Run code sn-p] 2. 按照给定的 URL 3. 阅读说明
错误说去这里：developers.google.com/maps/documentation/javascript/…
另外，您将 API 密钥留在了代码中。您可能想删除此问题
客户端密钥不需要保护，如果配置正确，它对于没有上传到您服务器的权限的人来说毫无用处。
您的 API 密钥是否有引荐来源网址限制？如果是这样，请检查您是否授权了您的域。否则在public issue tracker 中提出问题。可能由于某种原因，该域被 Google 屏蔽了。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

请看谷歌地图api教程： https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map

仔细阅读，你会发现需要一个密钥，YOUR_API_KEY

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

要获取您的密钥，请访问此处：https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#key

【讨论】：

【解决方案2】：

我遇到了同样的问题，尝试使用 Google Maps API。得到相同的消息去查看 JavaScript 控制台。真是浪费时间！

就我而言，问题是我在从 Google 获取浏览器 API 密钥时输入了错误的域名（引用者）。

在 Google API 站点中修复引用域的名称 (http://example.com/*) 为我解决了这个问题。

【讨论】：

我的问题是，我只添加了 http:// 版本，而不是 www 版本，它适用于某些人，但不是所有人。

【解决方案3】：

用这个替换你的 googleApi 地图插件...

“https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap”

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>

  </body>
</html>

希望它对你有用。

【讨论】：

这对我也不起作用，你能提供另一种方法吗

【解决方案4】：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap"
    async defer></script>
  </body>
</html>

【讨论】：

这不是答案

【解决方案5】：

当我在新主机上使用包含嵌入地图的页面时，我遇到了同样的问题。该地图在我的开发站点上运行，所以这对我来说也是一个惊喜。

如果您通过 Google 搜索进入此页面，则需要从这里开始：https://developers.google.com/maps/documentation/javascript/get-api-key。

如果您想阅读有关 API 密钥要求的公告，请阅读：https://googlegeodevelopers.blogspot.com/2016/06/building-for-scale-updates-to-google.html

另外请注意，无论如何，“&callback=initMap”会导致错误。

【讨论】：

【解决方案6】：

您可以在此处参考 Google 地图文档以了解不同的错误代码： https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes

以上错误代码在文档中描述如下：

加载 Google Maps JavaScript API 的当前 URL 尚未添加到允许的推荐人列表中。请检查推荐人在 Google API 控制台上设置您的 API 密钥。

有关更多详细信息，请查看地图文档的链接以获取错误消息。

Google Maps 现在需要使用 Google Maps API 密钥才能根据本文在您的网站上显示地图：https://googlegeodevelopers.blogspot.co.za/2016/06/building-for-scale-updates-to-google.html.

【讨论】：

【解决方案7】：

转到https://console.developers.google.com/apis/credentials
点击您的 API 密钥名称以编辑其设置。
在应用程序限制下，确保选择“HTTP 引荐来源网址（网站）”并且您已添加以下两个条目（将 yourname.com 替换为您自己的域）。两者都是必需的，请确保您已将 /* 附加到末尾。

例子：

yourname.com/* *.yourname.com/*

4.单击“保存”按钮，然后等待几分钟以使更改生效（Google 表示最多可能需要 5 分钟）。

【讨论】：