Question

我需要你的帮助。我想将Google地图与javascript-api集成。

我不知道我做错了什么。 Google JavaScript API已启用。我的域名已确认。在key=YOUR_API_KEY中，我输入了我的API-KEY。

＆＃34;简单地图＆＃34;下面的Google代码示例创建一个空白页面。没有显示错误消息console screenshot

似乎已加载脚本，但不会显示地图。

<!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=YOUR_API_KEY&callback=initMap"
            async defer></script>
      </body>
   </html>

在我的网站map.html

上查看此示例页面

也许有人可以帮助我。

谢谢你，克里斯

Answer 1

使用包含google maps api

的帐户登录https://console.developers.google.com

转到凭据
点击列表中的api_key条目
在主要限制下，选择无或将HTTP引用添加为* .grossen.de / *

Answer 2

您从Google脚本收到“RefererNotAllowedMapError”错误。这意味着您的URL未成功添加到refferers列表中。检查您是否添加了。至少在你的示例页面上。尝试清除缓存或使用隐身窗口以确保您没有收到任何错误。

编辑： 还要确保为地图div设置高度！（默认设置为0！）

Answer 3

首先对我的英语不好说感到抱歉。

我遇到了同样的问题，并找到了以下答案（对我而言，第一个答案是正确的答案）：

您的帐户尚未启用结算。
提供的计费方式无效（例如，信用额已过期）卡）。
已经超过了自己设定的每日限额。

来源：developers.google.com

如果答案相同，则可以在此处使用信用卡进行注册：console.cloud.google.com

Answer 4

在我的情况下，只需在

上提供height属性和值（精确值：如200px）

<div id="map"></div>

就像@NeuTronas所说的那样，它解决了我的问题。

我也找到了官方文件说明

https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-TW#if-your-code-isnt-working

希望这可以为您提供帮助。

Google Maps API - 地图不显示 - 没有错误

4 个答案: