Google 地图未在 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 error: 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 Error

The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google Developers Console.

See API keys in the Google Developers Console. For more information, see Best practices for securely using API keys.

最简单的修复（特别是对于您不拥有的站点，如 jsfiddle.net）是从 URL 中删除 key=YOUR_API_KEY&（这不是有效的密钥，并且密钥不是 必需的 ，它是 推荐的 )。

更新： 现在需要密钥。 Google 有一个适用于 jsfiddle 的测试密钥：AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk（如果您在示例中单击“在 JSFiddle 中打开”，它就会被填充）

working fiddle

代码片段：

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>

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

Google Map not displaying in JS Fiddle (RefererNotAllowedMapError)

html

javascript

google-maps

google-maps-api-3

jsfiddle