javascript - 为什么 Google map API key 无法识别我的引荐来源网址?

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

我的网站域 (devodeliver.co.uk) 上有一个 html 文件,它使用代码调用我的 API key 。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>

在开发者控制台中,我尝试添加域名 URL 的每种组合,如下所示

enter image description here

但是当我加载我的网站时,它会显示 map 一毫秒,然后返回错误“Google Maps API 错误:InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error_.bb @ MY-KEY:32” - 基本上是说我没有授予我的网站权限访问该 API key 。但即使我没有设置任何引荐来源网址,它也会返回相同的错误消息。我也等了 5 分钟多 API 才生效。请问我做错了什么?!我花了将近 16 个小时试图解决这个问题,但我似乎一辈子都无法解决这个问题。救命!

完整的 HTML 代码:

 <html>
 <head>

    <style type="text/css">
      #map
      {
        height:400px;
        width:400px;
        display:block;
      }
    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7-LTLEupUWBJBWl1GpOWPwkMvxzf8itQ"></script>

    <script type="text/javascript">

        function getPosition(callback) {
          var geocoder = new google.maps.Geocoder();
          var postcode = document.getElementById("postcode").value;

          geocoder.geocode({'address': postcode}, function(results, status)
          {
            if (status == google.maps.GeocoderStatus.OK)
            {
              callback({
                latt: results[0].geometry.location.lat(),
                long: results[0].geometry.location.lng()
              });
            }
          });
        }

        function setup_map(latitude, longitude) {
          var _position = { lat: latitude, lng: longitude};

          var mapOptions = {
            zoom: 16,
            center: _position
          }

          var map = new google.maps.Map(document.getElementById('map'), mapOptions);

          var marker = new google.maps.Marker({
            position: mapOptions.center,
            map: map
          });
        }

        window.onload = function() {
          setup_map(51.5073509, -0.12775829999998223);

          document.getElementById("form").onsubmit = function() {
            getPosition(function(position){

              var text = document.getElementById("text")
              text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";

              setup_map(position.latt, position.long);
            });
          }
        }
    </script>

 </head>
 <body>
    <form action="javascript:void(0)" id="form">
      <input type="text" id="postcode" placeholder="Enter a postcode">
      <input type="submit" value="Show me"/>
    </form>
    <div id="map"></div>
    <div id="text"></div>
 </body>
 </html>

最佳答案

在这里,当我测试它时,它在 JS 控制台上给出错误“Google Maps API 错误:ApiNotActivatedMapError”。

查看此问题:https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes

当您通过 Maps-Javascript-API 使用库或服务并使用 key 时,您需要激活 Google Maps JavaScript API

确保为您的项目激活Google Maps JavaScript API

另外,

查看有关启用 Google Maps Jvascript API 的其他主题:Google Map error: InvalidKeyOrUnauthorizedURLMapError

关于javascript - 为什么 Google map API key 无法识别我的引荐来源网址?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36768448/

相关文章:

javascript - innerHTML 产生未定义,但正确的数据可见

javascript - 行动问题和表单提交

android - 在google map static api中绘制圆形路径

javascript - 我如何从另一个网页(带有 url)跳转到特定的 LatLong 或我自己创建的谷歌地图(v3 JS API)上的标记?

google-maps-api-3 - 在 Google Maps JS API 中禁用 POI 标记的点击行为

javascript - 谷歌地图 javascript api V3 不显示 map

javascript - html5输入的焦点月份或年份[类型="date"]

javascript - 如何按用户选择的特定类别进行搜索

java - 有了坐标,具体区域如何设置?

javascript - 自定义 map 类型 : repeating maps and markers. 如何向 map 添加填充?