Google Map non viene visualizzata in JS Fiddle

Sto riscontrando un problema nel far visualizzare una mappa in JS Fiddle. È questo esempio:

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

Ho ottenuto il codice che funziona con la mia chiave API incollando un documento HTML vuoto, ma quando incollo l’intero JavaScript + HTML in JS Fiddle (tutto nel campo HTML, non è la formattazione ideale, ma dovrebbe comunque funzionare, giusto?) errore console “Errore API di Google Maps: RefererNotAllowedMapError.”

Ho provato ad incollare https://maps.googleapis.com/maps/api/js in risorse esterne ma questo non ha cambiato nulla.

Se avessi aggiunto la risorsa esterna, avrei ancora bisogno

  

nell’HTML o posso semplicemente liberarmene?

Grazie per eventuali suggerimenti su come far funzionare questo in JS Fiddle!

L’ errore che si sta verificando: Google Maps API error: RefererNotAllowedMapError. significa che non hai una chiave valida per quel dominio.

Errore RefererNotAllowedMapError

L’URL corrente che carica l’API JavaScript di Google Maps non è stato aggiunto all’elenco dei referrer autorizzati. Controlla le impostazioni del referrer della tua chiave API sulla Google Developers Console.

Vedi le chiavi API nella Google Developers Console. Per ulteriori informazioni, consulta Procedure ottimali per l’utilizzo sicuro delle chiavi API.

La soluzione più semplice (in particolare per un sito che non possiedi come jsfiddle.net) consiste nel rimuovere la key=YOUR_API_KEY& dall’URL (che non è una chiave valida e una chiave non è richiesta , è consigliabile ).

violino funzionante

snippet di codice:

 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 += 'Route Segment: ' + routeSegment + '
'; summaryPanel.innerHTML += route.legs[i].start_address + ' to '; summaryPanel.innerHTML += route.legs[i].end_address + '
'; summaryPanel.innerHTML += route.legs[i].distance.text + '

'; } } 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; } 
  
Start:
Waypoints:
(Ctrl-Click for multiple selection)

End: