Avete il potere di creare applicazioni utili mappa che è possibile visualizzare su computer e dispositivi mobili. Google Maps, che si può avere visto sul Web, è un servizio online che gli sviluppatori accedono tramite Google Application Programming Interface. Una volta che avete un'idea per la propria applicazione mappa, potete accedere a questa interfaccia e cominciare a imparare a sfruttare la potenza di Google Maps. Tutto ciò che serve è una pagina Web e una chiave API di Google Maps.
Istruzioni
1
Visita la pagina di registrazione per Google Maps API a Code.google.com/apis/maps/signup.html e Iscriviti a una chiave API. Google Maps genererà una nuova API key e visualizzarla nella pagina Web. Copiare tale chiave.
2
Avviare un editor HTML e incollare il seguente codice in uno dei documenti HTML:
< onload="loadMap() del corpo" >
< h1 > My mappa appare sotto < / h1 >
< div id = "myMap" >< / div >
Questo tag div contiene la mappa che si genera. Relativo valore di id è "myMap." La funzione di "onload" chiama una funzione JavaScript che carica la mappa quando viene caricata la pagina Web.
3
Aggiungere il seguente codice alla sezione head del documento:
< style type = "text/css" >
myMap {altezza: 400px; Larghezza: 400px;}
< / stile >
Questo selettore CSS imposta gli attributi per il div. I valori correnti rendono la div di 400 pixel di altezza e 400 pixel di larghezza. Modificare questi valori per modificare le dimensioni della tua mappa.
4
Incollare il seguente tag script nella sezione head del documento:
< script type = "text/javascript"
src = "http://maps.googleapis.com/maps/api/js?key=MY_API_KEY & amp; sensore = true & quot; >
< / script >
Sostituire MY_API_KEY con la tua chiave API.
5
Incollare il seguente codice JavaScript nella sezione script del documento:
function loadMap() () {
var latitudeLongitude = new google.maps.LatLng (-34.397, 150.644);
var mapOptions = {
Zoom: 3,
centro: latitudeLongitude,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Mappa di var = nuovo google.maps.Map(document.getElementById("myMap"),
mapOptions);
}
La funzione loadMap viene eseguito quando la pagina viene caricata. La variabile latitudeLongitude contiene la latitudine e la longitudine della posizione che si desidera apparire sulla mappa. Tali valori sono 37.970185 e 121.810913 in questo esempio. Il valore di zoom Imposta livello di zoom della mappa, e l'opzione Centro centra la mappa sopra la posizione della base impostata in lattitudeLongitude e lo zoom. Il codice chiama la funzione di mappa nella dichiarazione finale per generare la mappa. Tale funzione utilizza le variabili div e mapOptions come parametri.
6
Salvare il documento e aprirlo in un browser per visualizzare la mappa. Apparirà così come avviene in Google Maps. Fare clic e trascinare la mappa per visualizzare diverse posizioni e trascinare i cursori per ingrandire e rimpicciolire.
Consigli & Avvertenze
- Un modo rapido per trovare la latitudine e la longitudine di un luogo è quello di visitare Google Maps e cercare qualsiasi posizione. Quando viene visualizzata la mappa, fare clic sul pulsante "Link" per visualizzare tali valori.
- In questo esempio, il valore per mapTypeID è «Roadmap». Altri valori possibili sono Satellite, ibrido e del terreno. La visualizzazione ibrida consente di visualizzare immagini fotografiche e strade con i nomi delle strade. Impostare il valore su terreno per visualizzare una mappa fisica di rilievo che Mostra terreno di un luogo, come fiumi e montagne.
- Valori più elevati per il valore di zoom causano il browser per ingrandire di più sulla tua posizione. Sperimentare con valori diversi per ottenere l'effetto di zoom desiderato.