Se si utilizza codice JavaScript di esempio di Google e la tua chiave API di Google Maps per inserire una mappa in una pagina Web, si sa che il codice di esempio crea una singola mappa. Questo va bene quando hai solo una posizione per visualizzare, ma si potrebbe desiderare mostrare ai visitatori del sito una vista supplementare. Che scopo, è possibile fare alcune modifiche rapide al codice HTML che genera la mappa di Google.
Aggiunta di una mappa
Non ci vuole molto codice per inserire una mappa di Google in una pagina Web. Il complesso codifica necessaria per generare una mappa esiste in JavaScript esterno che si collega a dal codice come illustrato di seguito:
src = "http://maps.googleapis.com/maps/api/js?key=API_KEY & amp; sensore = false & quot; >
Dopo aver creato un nuovo oggetto di JavaScript, è possibile popolare con alcune proprietà come lo zoom che consentono di personalizzare la mappa. Generare la mappa chiamando la funzione di mappa, come illustrato in questo esempio:
map1 var = nuovo google.maps.Map(document.getElementById("div1"),
Questo codice crea una variabile denominata map1 e lo passa l'ID del div che visualizza la mappa.
L'aggiunta di due mappe
Aggiungere una seconda mappa di clonazione alcuni del codice utilizzato per creare la prima mappa. Supponiamo che il vostro oggetto di JavaScript è apparso come illustrato di seguito:
mapObject var = {
mapTypeId: google.maps.MapTypeId.TERRAIN,
centro: Lat_Long,
Zoom: 9,
};
Questo oggetto denominato mapObject contiene proprietà che definiscono il tipo di mappa che si desidera visualizzare, le coordinate della posizione si desidera venga visualizzato e il livello di zoom della mappa. Se si copia tale codice e incollarlo nel documento, è possibile modificare il nome dell'oggetto copiato a mapObject2. Apparire la seconda mappa clonazione l'istruzione che chiama la funzione di mappa e cambiando il nome dell'oggetto copiato da map1 map2. Il nome del div che visualizza la seconda mappa, è necessario modificare anche argomento di getElementById da div1.
Modifiche del foglio di stile:
Non hai bisogno di codice complesso Cascading Style Sheet per collocare una mappa di Google la pagina Web. È possibile definire una classe semplice che definisce le proprietà di larghezza e altezza degli elementi div come illustrato di seguito:
.mapStyle1 {altezza: 100px; Larghezza: 200px;}
Questo codice crea una classe denominata mapStyle1 che possono fare riferimento a entrambi divs. Altezza e la larghezza di ogni div sarà 100 pixel e 200 pixel. L'aumento di questi valori rende le mappe più grandi. Se li fanno troppo grande, gli utenti devono scorrere per visualizzare le mappe.
Considerazioni
Se vuoi la seconda mappa per avere una dimensione diversa, creare un'altra classe che contiene valori di larghezza e altezza differente e assegnarlo alla tua seconda div. crea un interessante effetto di doppio-vista facendo una grande mappa che mostra una posizione e inserendo una mappa molto più piccola accanto ad essa che mostra una vista ingrandita della stessa posizione. Si potrebbe anche avere una mappa mostrano che una vista satellitare e l'altra una visualizzazione del terreno. Aggiungi come molti che come ti piace a una pagina utilizzando queste tecniche di codifica di Google maps.