Du kan opprette en egendefinert Google Kart med et bilde overlegg ved hjelp av Google Maps API versjon 3 . For eksempel kan du tegne en ny USGS kontur kart over en eksisterende Google kart for å generere en detaljert tursti kartet for ditt nettsted besøkende. Bruk Google Maps " OverlayView " class å legge inn overlegg på kartet. Instruksjoner
en

Åpne HTML-filen og finn seksjonen som inneholder Google Maps kode .
2

Lag en global variabel kalt " overlay " ved å skrive følgende i din koden over der du initialisere kartet : en

Var overlegg ;
3

Finn din kartets " initialize "-funksjonen og legge til en variabel som inneholder banen for overlay bildefilen : en

Var imageSource = ' grafikk /map_hiking.jpg ';
4

Definer overlegg global variabel . For eksempel skrive : .

Overlay = ny HikingOverlay ( grenser , srcImage , kart) ;

overlegg variabel kaller en " HikingOverlay "-funksjonen , som inneholder parametre for bildet overlegg

5

Lag funksjonen for overlegget bildet. I dette eksemplet , er funksjonen som kalles " HikingOverlay " : en

funksjon HikingOverlay ( grenser , srcImage , kart)
6

Initialiser grensene , image kilde og kart eiendommer for Vandring Overleggsfunksjonen .
7

Lag en underklasse for HikingOverlay funksjon . Bruk en underklasse , slik at du ikke overskriver egenskapene til den overordnede klassen . For eksempel skrive : en

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

Fest overlegget til rutene i Google Maps -vinduet . Du kan bruke HTML " div " elementer til nettopp plassere overlegget eller bare legge det til en rute hvis overlegget dekker hele kartet. For eksempel lage divisjonen og fest kartet til panelet ved å skrive : en

HikingOverlay.sub.onAdd = function ( ) {

Var divisjon = document.createElement (' DIV ');

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

sub_div = div ;

VAR ruter = this.getpanes (); panes.overlayLayer.appendChild ( div) ;

}
9

Place overlegget over kartet ved hjelp av " uavgjort "-metoden . For eksempel skrive : en

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

Konverter bildeprojisering fra breddegrad og lengdegrad koordinater for å piksler for plassering i div . For eksempel skrive : en

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

Angi målene for den div style å tilpasse bildet . For eksempel skrive : en

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

Lagre filen og teste den. Google viser bildet ditt over eksisterende Google- kartet. Hvis bildet ikke er riktig plassert , angi flere posisjonering koordinatene til koden din til nettopp plassere bildet .