È possibile creare una mappa personalizzata di Google con una sovrapposizione di immagini utilizzando Google Maps API versione 3 . Ad esempio, è possibile sovrapporre un contorno mappa USGS su una mappa di Google esistente per generare una dettagliata carta escursionistica sentiero per i visitatori del tuo sito . Usare le mappe " OverlayView " classe di Google per aggiungere sovrapposizioni di immagini alla tua mappa . Istruzioni
1

Aprire il file HTML e individuare la sezione che contiene il codice di Google Maps .
2

Creare una variabile globale chiamata "overlay" , digitando il seguente nella vostra codice di sopra dove si inizializza la tua mappa :

var overlay ;
3

Individuare la funzione " inizializzazione " della vostra mappa e aggiungere una variabile che contiene il percorso del file di immagine per la sovrapposizione :

Imagesource var = ' grafica /map_hiking.jpg ';
4

Definire la variabile globale di sovrapposizione . Ad esempio, digitare : .

Overlay = new HikingOverlay ( limiti , srcImage , mappa) ;

La variabile di sovrapposizione chiama una funzione " HikingOverlay ", che contiene i parametri per la sovrapposizione di immagini

5

creare la funzione per l'immagine di sovrapposizione . In questo esempio , la funzione si chiama " HikingOverlay " :

funzione HikingOverlay ( limiti , srcImage , mappa ) economici 6

Inizializzare i limiti , fonte immagine e le proprietà mappa per il Trekking funzione di sovrapposizione .
7

creare una sottoclasse per la funzione HikingOverlay . Utilizzare una sottoclasse in modo da non sovrascrivere gli attributi della classe padre . Ad esempio, digitare :

HikingOverlay.sub = new google.maps.OverlayView ( ) ;
8

applicare la mascherina per i riquadri della finestra di Google Maps . È possibile utilizzare elementi HTML " div " per posizionare con precisione la sovrapposizione o semplicemente collegarlo a un riquadro se la sovrapposizione copre l'intera mappa . Ad esempio, creare la divisione e allegare la mappa nel riquadro digitando:

HikingOverlay.sub.onAdd = function () { var

divisione = document.createElement ( ' div' ) ;

var img = document.create.Element ( " img " ) ; div.appendChild ( img ) ;

sub_div = div ;

var riquadri = this.getpanes (); panes.overlayLayer.appendChild ( div) ;

}
9

Posizionare la mascherina sulla mappa utilizzando il metodo " draw " . Ad esempio, digitare :

HikingOverlay.sub.draw = function ( ) {var overlayProjection = this.getProjection (); }
10

Converti la proiezione dell'immagine dalla latitudine e longitudine coordinate di pixel per il posizionamento del div . Ad esempio, digitare :

var Northwest = overlayProjection.fromLatLngToDivPixel ( this.bounds_.getNorthWest ());
11

Specificare le dimensioni del div style per adattare l'immagine . Ad esempio, digitare :

var div = this.div_ ; div.style.left = northWest.x + ' px ';
12

Salvare il file e testarlo . Google visualizza l' immagine sopra la mappa di Google esistente . Se l'immagine non è posizionata correttamente , specificare le coordinate di posizionamento supplementari per il proprio codice per posizionare con precisione l'immagine .