Google Map görüntülenmiyor JS Fiddle

Question

JS Fiddle'da görüntülenecek bir harita almakla ilgili bir sorun yaşıyorum.

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

Ben boş bir html belge içine yapıştırarak benim API anahtarı ile çalışan kodu var ama tüm HTML alanına (JS Fiddle içine tam JavaScript + HTML yapıştırdığınızda, ideal değil: Bu örnek biçimlendirme, ancak yine de çalışmalı, değil mi?) "Google Maps API hatası: RefererNotAllowedMapError."

https://maps.googleapis.com/maps/api/js dosyasını dış kaynaklara yapıştırmayı denedim, ancak bu hiçbir şey değişmedi.

Ben dış kaynak hala HTML

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

gerekir ya da sadece ondan kurtulmak için, eklemiş yoksa?

JS Fiddle'da çalışmak için bunu aldığınız için teşekkür ederiz!

Answer 1

error10 alıyorsunuz: Google Maps API error: RefererNotAllowedMapError., o etki alanı için geçerli bir anahtarınız yok demektir.

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.

En basit düzeltme (özellikle bir site için size jsfiddle.net gibi sahip olmadığınız), onu bu geçerli anahtar değildir ve anahtar değil gerekli olduğu (URL'den key=YOUR_API_KEY& kaldırmaktır önerilir).

working fiddle

kod parçacığı:

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>