Google Map не отображается в JS Fiddle

Question

У меня возникла проблема с получением карты для отображения в JS Fiddle. Именно этот пример:

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

Я получил код, работающий с моим ключом апи, вставив в пустой HTML документ, но когда я вставляю полный JavaScript + HTML в JS Fiddle (все в поле HTML, не является идеальным форматирование, но он все равно должен работать, правильно?), он дает ошибку консоли «Ошибка API Карт Google: 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), чтобы удалить key=YOUR_API_KEY& из URL (что не является допустимым ключом, а ключ не требуется , его есть рекомендация).

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>