Question

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

我不知道为什么

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

Answer 1

请查看Google maps 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

Answer 2

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

在我的情况下，问题是我从Google获取浏览器API密钥时输错了域名（引荐来源）。

在Google API网站中修复引荐域名（http://phystutor.com/ *）的名称为我解决了这个问题。

Answer 3

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

＆＃34; https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap＆＃34;

＆＃13;

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

＆＃13;

希望它适合你。

Answer 4

我在新主机上使用网站上网时遇到了同样的问题，其中的网页包含之前未在网站上的嵌入式地图。这张地图在我的开发网站上有效，所以这对我来说也是一个惊喜。

如果您在此页面上进行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”导致错误。

Answer 5

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

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

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

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

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

Answer 6

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

示例：

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

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

Answer 7

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

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

7 个答案: