Du kan oprette en brugerdefineret Google Map med et billede overlay ved hjælp af Google Maps API version 3 . For eksempel kan du overlay en USGS kontur kort over en eksisterende Google-kort til at generere en detaljeret vandresti kort til dit websted besøgende . Brug Google Maps " OverlayView " class at tilføje billedoverlejringer til dit kort . Instruktioner
1

Åbn din HTML-fil og find afsnit med din Google Maps -koden.
2

Opret en global variabel kaldet " overlay " ved at skrive følgende i din ovenstående kode , hvor du starter dit kort : Hej

var overlay ,
3

Find din kortets "Initialize "-funktionen og tilføje en variabel, der indeholder stien til overlay billedfil : Hej

var imageSource = ' grafik /map_hiking.jpg «
4

Definer overlay globale variabel . Skriv f.eks : Hej

overlay = new HikingOverlay ( bounds, srcImage , map ) <

overlay variabel kalder en " HikingOverlay "-funktion , som indeholder de parametre for billedet overlay. br >
5

Opret funktionen for overlay billede. I dette eksempel er funktionen kaldet " HikingOverlay " : Hej

funktion HikingOverlay ( bounds, srcImage , kort)
6

Initialiser bounds , Image Source og kortegenskaber for Vandreture Overlay -funktionen.
7

Opret en underklasse for HikingOverlay funktion. Brug en underklasse , så du ikke overskriver de attributter i moderselskabet klassen. Skriv f.eks : Hej

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

Fastgør overlay til ruder i Google Maps -vinduet. Du kan bruge HTML " div " elementer til præcist at placere overlay eller bare sætte den på en rude , hvis overlay dækker hele kortet . For eksempel oprette division og lægger kortet for at ruden ved at skrive : Hej

HikingOverlay.sub.onAdd = function () {

var division = document.createElement ( ' DIV ');

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

sub_div = div ,

vAR ruder = this.getpanes (); panes.overlayLayer.appendChild ( div ),

}
9

Placer overlay over kortet ved hjælp af " draw "-metoden. Skriv f.eks : Hej

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

konvertere billedet fremskrivning fra længde-og breddegrad koordinater til pixels for placering i div . Skriv f.eks : Hej

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

Angiv dimensionerne af div style det passer til billedet. Skriv f.eks : Hej

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

Gem din fil og teste det . Google viser dit billede over din nuværende Google map . Hvis billedet ikke er placeret korrekt , angive yderligere positionering koordinater til din kode til præcist placere billedet .