谷歌地图未在 JS Fiddle 中显示（RefererNotAllowedMapError）

Question

我在获取地图以在 JS Fiddle 中显示时遇到问题。就是这个例子：

https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

我通过粘贴到空白的 html 文档中使代码与我的 api 密钥一起工作，但是当我将完整的 JavaScript + HTML 粘贴到 JS Fiddle 中时（全部粘贴到 HTML 字段中，格式不理想，但它应该仍然有效，对吧？）它给出了控制台错误“Google Maps API 错误：RefererNotAllowedMapError。”

我尝试将https://maps.googleapis.com/maps/api/js 粘贴到外部资源中，但这并没有改变任何东西。

如果我确实添加了外部资源，我还需要

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

在 HTML 中还是我可以摆脱它？

感谢您提供有关使其在 JS Fiddle 中工作的任何提示！

Answer 1

您得到的error：Google Maps API error: RefererNotAllowedMapError. 表示您没有该域的有效密钥。

RefererNotAllowedMapError 错误

加载 Google Maps JavaScript API 的当前 URL 尚未添加到允许的引荐来源列表中。请在 Google Developers Console 上检查您的 API 密钥的引用设置。

在 Google Developers Console 中查看 API 密钥。有关详细信息，请参阅安全使用 API 密钥的最佳做法。

最简单的解决方法（特别是对于您不拥有的网站，例如 jsfiddle.net）是从 URL 中删除 key=YOUR_API_KEY&（这不是有效的密钥，并且密钥不是必需的，推荐）。

更新：现在需要密钥。谷歌有一个适用于 jsfiddle 的测试密钥：AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk（如果你点击那里的示例上的“在 JSFiddle 中打开”）

working fiddle

代码 sn-p：

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true
      });
    }
  }

  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
          '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initMap);

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#right-panel select,
#right-panel input {
  font-size: 15px;
}
#right-panel select {
  width: 100%;
}
#right-panel i {
  font-size: 12px;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}
#right-panel {
  margin: 20px;
  border-width: 2px;
  width: 20%;
  float: left;
  text-align: left;
  padding-top: 20px;
}
#directions-panel {
  margin-top: 20px;
  background-color: #FFEE77;
  padding: 10px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
<div id="right-panel">
  <div>
    <b>Start:</b>
    <select id="start">
      <option value="Halifax, NS">Halifax, NS</option>
      <option value="Boston, MA">Boston, MA</option>
      <option value="New York, NY">New York, NY</option>
      <option value="Miami, FL">Miami, FL</option>
    </select>
    <br>
    <b>Waypoints:</b>
    <br>
    <i>(Ctrl-Click for multiple selection)</i>
    <br>
    <select multiple id="waypoints">
      <option value="montreal, quebec">Montreal, QBC</option>
      <option value="toronto, ont">Toronto, ONT</option>
      <option value="chicago, il">Chicago</option>
      <option value="winnipeg, mb">Winnipeg</option>
      <option value="fargo, nd">Fargo</option>
      <option value="calgary, ab">Calgary</option>
      <option value="spokane, wa">Spokane</option>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="Vancouver, BC">Vancouver, BC</option>
      <option value="Seattle, WA">Seattle, WA</option>
      <option value="San Francisco, CA">San Francisco, CA</option>
      <option value="Los Angeles, CA">Los Angeles, CA</option>
    </select>
    <br>
    <input type="submit" id="submit">
  </div>
  <div id="directions-panel"></div>
</div>