javascript - Google map 未在 JS Fiddle 中显示(RefererNotAllowedMapError)

Question

我在 JS Fiddle 中显示 map 时遇到问题。就是这个例子:

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

我通过粘贴到一个空白的 html 文档中来使代码与我的 api key 一起使用，但是当我将完整的 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 错误:RefererNotAllowedMapError。 表示您没有该域的有效 key 。

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& (这不是一个有效的 key ，并且 key 不是有效的) 必需，推荐)。

更新:现在需要 key 。 Google 有一个适用于 jsfiddle 的测试 key :AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk(如果您在示例中单击“在 JSFiddle 中打开”，则会填充该 key )

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>