Google FiddleでGoogleマップが表示されない

Question

JS Fiddleで表示する地図を取得する際に問題が発生しています。

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

私は空白のHTMLドキュメントに貼り付けて、自分のAPIキーを扱うコードを得たが、私はすべてのHTMLフィールドに（JSフィドルにフルのJavaScript + HTMLを貼り付ける際に、理想的ではない：それは、この例です書式設定はできますが、それでも問題はありません）、コンソールエラー "Google Maps APIエラー：RefererNotAllowedMapError"が表示されます。

https://maps.googleapis.com/maps/api/jsを外部リソースに貼り付けようとしましたが、何も変更されませんでした。

私は外部のリソースが追加されていない場合、私はまだHTMLに

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

が必要になりますか、私はちょうどそれを取り除くことができますか？

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&を削除することです（それが有効なキーではなく、鍵は必要ないが、それはが推奨です）。

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>