谷歌地图不显示在JS小提琴

Question

我有一个地图显示在JS小提琴的问题。这是这个例子：

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

我的代码和我的API密钥的工作由粘贴到一个空白的HTML文档，但是当我粘贴完整的JavaScript + HTML到JS小提琴（全部为HTML领域，不理想格式化，但它仍然可以工作，对不对？）它给控制台错误“谷歌地图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小提琴中工作！

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&（这不是一个有效的关键，而不是需要的关键是，它是推荐）。

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"></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>