Vis Google Maps
Før vi kan vise kortet skal vi huske at inkludere Google Maps klienten som vi læste om i sidste kapitel.
Derefter skal vi tilføje et nyt HTML element hvor vi vil have vores kort vist, rette i vores CSS for at give kortet en størrelse og endelig skal vi starte kortet fra vores Javascript kode.
Vores nye HTML element
Vores nye kort element er et afgrænset område i vores applikation som vi giver Google Maps lov til at ændre på.
Selve kortet består af mange forskellige HTML elementer med billeder og tekst der bliver dynamisk oprettede af Google Maps, og ved at
lade dem blive indsat i kort elementet kan vi undgå de påvirker resten af strukturen i vores applikation.
Vores nye CSS
Vi vil også gerne afgrænse kortets visuelle størrelse, derfor angiver vi en bredde og højde på kort elementet.
Som udgangspunkt vil et DIV element fylde 100% af dens tilgængelige bredde,
og vi kunne måske tænke os at tilføje elementer langs siden af kortet.
Vores script fil, minkode.js
Når vores applikation er indlæst vil vi gerne startet kortet og tilføjer derfor noget kode til vores start funktion.
Det første vi skal finde ud af er hvilken del af kloden vores kort skal vise som udgangspunkt.
Det gør vi i linje 10 gennem variablen placering,
der benytter sig af en hjælpefunktion kaldet google.maps.LatLng, hvor vi angiver højdegradder og breddegrader - i dette tilfælde et sted midt i Danmark.
Dernæst skal vi angive hvilken type kort og hvilket zoom niveau vi gerne vil starte med, hvilket vi angiver sammen med vores placering i
variablen kortValg der strækker sig fra linje 11 til 15.
Til sidst starter vi kortet i linje 16 gennem hjælpefunktionen google.maps.Map hvor vi angiver vores eget kort element samt vores
valgmuligheder fra variablen kortValg.
Der bliver gemt en reference til kortet i variablen map så vi senere kan justere på kortet.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.