Perché il tutorial di google maps non funziona sul mio pc?

Quindi ho scaricato un campione di codice dal sito web degli sviluppatori di google con cui giocare. Il bit di codice trovato di seguito è esattamente lo stesso del codice trovato qui . Quando scarico l’html e provo ad aprirlo localmente in chrome, non mostra nulla, mi restituisce una schermata vuota senza errori (firebug lite). Sto usando un mac e sono nuovo in tutte le cose di questo web dev. Devo impostare una cosa localhost o mi manca qualcosa? Qualsiasi aiuto è molto apprezzato.

     <a href="https://html.yocker.com/html/google-maps" title="Topics of Google Maps" target="_blank">Google Maps</a> JavaScript API v3 Example: Circle Simple    var citymap = {}; citymap['chicago'] = { center: new google.maps.LatLng(41.878113, -87.629798), population: 2842518 }; citymap['newyork'] = { center: new google.maps.LatLng(40.714352, -74.005973), population: 8143197 }; citymap['losangeles'] = { center: new google.maps.LatLng(34.052234, -118.243684), population: 3844829 } var cityCircle; function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(37.09024, -95.712891), mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); for (var city in citymap) { // Construct the circle for each value in citymap. We scale population by 20. var populationOptions = { strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: map, center: citymap[city].center, radius: citymap[city].population / 20 }; cityCircle = new google.maps.Circle(populationOptions); } }    

Poiché hai salvato il file direttamente dal sito demo, non hai salvato il file CSS associato (/maps/documentation/javascript/examples/default.css). Quindi la tua mappa non ha larghezza / altezza. Se si salva questo file e lo si fa riferimento correttamente, dovrebbe funzionare. In alternativa, puoi semplicemente aggiungere il bit di css al tuo file html:

      Google Maps JavaScript API v3 Example: Circle Simple      

Il problema è che l’attributo href dell’elemento di link nella head del documento utilizza un URL relativo che punta a un foglio di stile sul computer locale. A meno che tu non abbia scaricato quel foglio di stile e lo metta nella posizione a cui fa riferimento l’attributo href dell’elemento link , non lo troverà.

In questo caso però, ti consiglio di cambiarlo al seguente modo in cui usa il foglio di stile dal server di Google: