Ottieni una chiave API di Google Maps per il tuo sito
Il modo migliore per aggiungere una mappa di Google al tuo sito web è utilizzare l'API di Google Maps. E Google ti consiglia di ottenere una chiave API per poter utilizzare le mappe.
Non è necessario ottenere una chiave API per utilizzare Google Maps API v3, ma è molto utile in quanto consente di monitorare l'utilizzo e pagare per l'accesso aggiuntivo. L'API di Google Maps v3 ha una quota di 1 richiesta al secondo per utente fino a un massimo di 25.000 richieste al giorno. Se le tue pagine superano questi limiti dovrai abilitare la fatturazione per ottenere di più.
Come ottenere una chiave API di Google Maps
- Accedi a Google utilizzando il tuo account Google.
- Vai alla Developers Console
- Scorri l'elenco e trova l'API di Google Maps v3, quindi fai clic sul pulsante "OFF" per attivarlo.
- Leggi e accetta i termini.
- Vai alla console delle API e seleziona "Accesso API" dal menu a sinistra
- Nella sezione "Accesso API semplice", fai clic sul pulsante "Crea nuovo server chiave …".
- Inserisci l'indirizzo IP del tuo web server. Questo è l'IP da cui provengono le tue richieste di Maps. Se non conosci il tuo indirizzo IP, puoi cercarlo.
- Copia il testo nella riga "Chiave API:" (escluso quel titolo). Questa è la tua chiave API per le tue mappe.
Converti il tuo indirizzo in coordinate
Per poter utilizzare Google Maps sulle tue pagine web, devi disporre di latitudine e longitudine per la posizione. È possibile ottenere questi da un GPS o è possibile utilizzare uno strumento online come Geocoder.us per dirvi.
- Vai su Geocoder.us e inserisci il tuo indirizzo nella casella di ricerca.
- Copia il primo numero per la latitudine (senza una lettera in primo piano) e incollalo in un file di testo. Non è necessario l'indicatore di gradi (º).
- Copia il primo numero per la longitudine (sempre senza una lettera in primo piano) e incollalo nel tuo file di testo.
La tua latitudine e longitudine sarà simile a questa:
40.756076-73.990838
Geocoder.us funziona solo per gli indirizzi degli Stati Uniti, se hai bisogno di ottenere le coordinate in un altro paese, dovresti cercare uno strumento simile nella tua regione.
03 di 05Aggiunta della mappa alla tua pagina web
Innanzitutto, aggiungi lo script della mappa a
del tuo documento
Apri la tua pagina web e aggiungi quanto segue al CAPO del tuo documento.
Cambia la porzione evidenziata con i numeri di latitudine e longitudine annotati nel passaggio due.
Secondo, aggiungi l'elemento mappa alla tua pagina
Una volta che hai tutti gli elementi di script aggiunti al CAPO del tuo documento, devi posizionare la tua mappa sulla pagina. Lo fai aggiungendo a DIV elemento con il id = "map-tela" attributo. Ti consiglio anche di dividere questo div con la larghezza e l'altezza che si adatteranno alla tua pagina:
Infine, carica e prova
L'ultima cosa da fare è caricare la tua pagina e verificare che la tua mappa sia visualizzata. Ecco un esempio di una mappa di Google sulla pagina. Nota, a causa del modo in cui funziona CMS di About.com, dovrai fare clic su un link per visualizzare la mappa. Questo non sarà il caso sulla tua pagina.
Se la tua mappa non viene visualizzata, prova a inizializzarla con a CORPO attributo:
onload = "inizializzazione ()" >
Altre cose da controllare se la tua mappa non sta caricando includono:
- Cerca errori di battitura nel tuo JavaScript, incluso il caso. JavaScript è case sensitive.
- Assicurati di avere il
zoomecentroset di opzioni. - Assicurati che il tuo
DIVl'elemento è nella pagina con l'ID corretto. - Assicurati che il tuo
DIVl'elemento ha un'altezza.
Aggiungi un indicatore alla tua mappa
Ma a che serve una mappa della tua posizione se non c'è un marcatore che indichi alle persone dove dovrebbero andare?
Per aggiungere un indicatore rosso standard di Google Maps aggiungi quanto segue al tuo script sotto il var map = … linea:
var myLatlng = new google.maps.LatLng ( latitudine Longitudine );var marker = new google.maps.Marker ({posizione: myLatlng,mappa: mappa,titolo:" Precedente sede centrale di About.com '});
Cambia il testo evidenziato con la latitudine e la longitudine e il titolo che desideri visualizzare quando le persone passano il mouse sopra l'indicatore.
Puoi aggiungere tanti marcatori alla pagina che desideri, basta aggiungere nuove variabili con nuove coordinate e titoli, ma se la mappa è troppo piccola per visualizzare tutti i marcatori, essi non verranno mostrati a meno che il lettore non si ingrandisca.
var latlng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = nuovo google.maps.Marker ({posizione: latlng 2 ,mappa: mappa,titolo:" Apple Computer '});
Ecco un esempio di una mappa di Google con un indicatore. Nota, a causa del modo in cui funziona CMS di About.com, devi fare clic su un link per visualizzare la mappa. Questo non sarà il caso sulla tua pagina.
05 del 05Aggiungi una seconda (o più) mappa alla tua pagina
Se hai guardato la mia pagina di esempio di Google maps, noterai che ho più di una mappa visualizzata sulla pagina. Questo è molto facile da fare. Ecco come.
- Ottieni la latitudine e la longitudine di tutte le mappe che vuoi visualizzare come abbiamo appreso nel passaggio 2 di questo tutorial.
- Inserisci la prima mappa come abbiamo appreso nel passaggio 3 di questo tutorial. Se vuoi che la mappa abbia un marker, aggiungi il marcatore come al punto 4.
- Per la seconda mappa, dovrai aggiungere 3 nuove righe allo script initialize ():
var latlng2 = new google.maps.LatLng ( seconde coordinate );var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Se vuoi un marker anche sulla nuova mappa, aggiungi un secondo marker che punta alle seconde coordinate e alla seconda mappa:
var myMarker2 = new google.maps.Marker ({position: latlng2 , carta geografica: map2 , titolo: " Il tuo titolo di marcatore ' }); - Quindi aggiungi il secondo dove vuoi la seconda mappa. E assicurati di dargli un
id = "map_canvas_2"ID. - Quando la pagina viene caricata, verranno visualizzate due mappe
Ecco il codice di una pagina con due Google maps su di esso:
