Se si utilizza esempio di codice JavaScript 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 sola mappa. Questo va bene quando si dispone di una sola posizione da visualizzare, ma si potrebbe desiderare di mostrare ai visitatori del sito una vista supplementare. È possibile farlo facendo alcuni rapidi cambiamenti al codice HTML che genera la mappa di Google.

Aggiungendo una mappa

Non ci vuole molto codice per inserire una mappa di Google in una pagina Web. La codifica complessa necessaria per generare una mappa esiste nel JavaScript esterno che si collega a dal codice come illustrato di seguito:

src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">

Dopo aver creato un nuovo oggetto JavaScript, è possibile popolarlo con alcune proprietà come lo zoom che consentono di personalizzare la mappa. Generare la mappa chiamando la funzione MAP, come mostrato in questo esempio:

var map1 = new google.maps.Map (document.getElementById ( "div1"),

Questo codice crea un map1 variabile chiamata e lo passa l'ID del div che visualizza la mappa.

L'aggiunta di due mappe

Aggiungere una seconda mappa clonando parte del codice utilizzato per creare la prima mappa. Supponiamo che il vostro oggetto JavaScript è apparso come illustrato di seguito:

var MapObject = {
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 che si desidera visualizzare e della mappa livello di zoom. Se si copia il codice e incollarlo nel documento, è possibile modificare il nome dell'oggetto copiato mapObject2. Rendere la seconda mappa appare clonando l'affermazione che chiama la funzione Map e cambiando il nome dell'oggetto copiato da map1 a MAP2. È necessario modificare anche l'argomento del getElementById dal div1 al nome del div che visualizza la seconda mappa.

Modifiche foglio di stile:

Non hai bisogno di complesso codice Cascading Style Sheet per effettuare una mappa di Google la pagina Web. È possibile definire una semplice classe che definisce le proprietà di larghezza e altezza dei vostri elementi div come illustrato di seguito:

.mapStyle1 {height: 100px; width: 200px; }

Questo codice crea una classe denominata mapStyle1 cui entrambi i div possono fare riferimento. altezza e la larghezza di ogni div saranno 100 pixel e 200 pixel. Aumentando questi valori rende le mappe più grandi. Se li fai troppo grande, gli utenti devono scorrere per visualizzare le mappe.

considerazioni

Se desideri che il tuo seconda mappa per avere una dimensione diversa, creare un'altra classe che contiene diversi valori di altezza e larghezza e assegnarlo alla tua seconda div. Creare un interessante effetto dual-view, facendo una grande mappa che mostra una posizione e mettendo una mappa molto più piccolo accanto ad essa che mostra una visione più ravvicinata nella stessa posizione. Si potrebbe anche avere una carta mostrano una immagine satellitare e l'altra esposizione vista del terreno. Aggiungere il numero di mappe di Google che vuoi a una pagina utilizzando queste tecniche di codifica.