Il miglior tutorial base di Google Maps Nel 2024, in questo tutorial puoi imparare Creare un semplice Google Maps,Esempi,Esempi di analitica,Perché dovrebbe dichiarare il HTML5 applicazione?,Aggiungere Google Maps API Key,Esempi,Proprietà personalizzate Mappa,Dove per visualizzare su Google Maps,Creare un oggetto mappa,Esempi,Loading Map,
Ora creiamo un semplice Google Maps.
Il seguente è un grafico che mostra la Google Maps Londra:
Nell'esempio di cui sopra creiamo un processo per risolvere la mappa di Google.
La maggior parte dei browser usano il "modello standard" di HTML5 rendere il documento di più pagine, il che significa che l'applicazione è compatibile con tutti i principali browser.
Inoltre, se non ci sono tag DOCTYPE, il browser si utilizza la modalità promiscua (quirks mode) per rendere il contenuto della pagina.
Suggerimento: Va notato che alcuni "modalità promiscua" nel CSS e non è possibile utilizzare la modalità standard.In una particolare applicazione, tutti devono ereditare da elementi di blocco madri basate su una percentuale delle dimensioni. Se non si specifica la dimensione del modulo nel genitore, il valore di default 0 x 0 pixel. Se si desidera utilizzare percentuali, può essere dichiarato nel tag <style>, come segue:
Questo modulo dichiarazione di stile mappa mostra (GoogleMap) deve essere all'altezza HTML del 100%.
Nell'esempio seguente il primo tag <script> deve essere incluso in Google Maps API:
La chiave API di Google generati posto in parametrichiave(key= YOUR_API_KEY).
È necessarioil parametro sensore, il parametro viene utilizzato per indicare se l'applicazione utilizza un sensore (simile alla navigazione GPS) per individuare la posizione dell'utente.I valori dei parametri possono essere impostati su vero o falso.
HTTPS
Se l'applicazione è sicuro HTTP: applicazione (HTTPS Secure HTTP), è possibile utilizzare HTTPS per caricare l'API di Google Maps:
caricamento asincrono
Allo stesso modo, possiamo anche caricare l'API di Google Maps dopo che la pagina è completamente caricato.
L'esempio seguente utilizza window.onload per implementare a pieno carico quando la pagina viene caricata Google Maps. CaricaScript () funzione crea caricare l'API di Google Maps tag <script>. Anche alla fine dell'etichetta al callback = inizializzare i parametri, inizializzare () viene eseguita dopo la API è completamente caricato come funzione callback:
Prima di inizializzare la mappa, abbiamo bisogno di creare un oggetto della mappa per definire Programma proprietà:
Centro (centro)
attributo Centro specifica il centro della mappa, che per coordinate (latitudine, longitudine) per creare un punto centrale sulla mappa.
Zoom (zoom Series)
proprietà zoom zoom della mappa specifica il numero di stadi. zoom: 0 mostrare il fondo scala l'intera mappa della Terra.
MapTypeId (tipo di mappa iniziale)
attributo type mapTypeId specifica mappa iniziale.
mapTypeId comprende i seguenti quattro tipi:
Tipicamente utilizzata in Google Maps elemento <div>:
Nota: La dimensione dellamappa sarà div impostato per mostrare la dimensione della mappa, in modo che possiamo impostare la dimensione della mappa nella <div> elemento.
Il codice precedente utilizza il parametro (mapProp) nell'elemento <div> (id è googleMap) crea una nuova mappa.
Suggerimento: Se sidesidera creare più pagine della mappa, è sufficiente aggiungere nuovi oggetti mappa può essere.
Il seguente esempio definisce quattro mappe grado (mappe utilizzando quattro diversi tipi di mappa):
finestra di mappa per inizializzare l'oggetto dopo il caricamento eseguendo la funzione initialize (), che assicura che la pagina è stata completamente caricata prima di caricare le Google Maps: