Hvordan placeres data på Google Maps?
I sidste kapitel gennemgik vi hvordan man kunne håndtere data, og endte med en række links til adresser på Amalienborg Slotsplads der hver især åbnede et kort fra Kort & Matrikelstyrelsen. Nu vil vi kigge på hvordan vi kan få placeret disse adresser på vores eget kort.
De adresser vi modtager fra Danmarks servicen indeholder meget præcise koordinater som vi kan bruge til at finde adressens position og dernæst
skabe en markør
på vores kort.
Vores eget kort kommer fra Google Maps og derfor skal vi benytte os af de metoder der her bliver stillet til rådighed. Vi bruger google.maps.LatLng metoden til at finde vores position og google.maps.Marker metoden til at skabe vores markør.
Nu begynder vores kode at virke ret stor, men de enkelte par ændringer vi har lavet bliver forklaret lige nedenunder.
Vores script fil, minkode.js
Vi har ændret en smule i visAdresser funktionen samt tilføjet en ny placerAdresse funktion,
men ellers er resten af koden uændret i forhold til sidste kapitel.
visAdresser funktionen er blevet gjort en smule mere overskuelig, da vi nu opbygger hvert link i
en lokal variabel. Dette sker i linje 13 til 16.
I linje 17 angiver vi hvad der skal ske når man klikker på et adresse link.
Vi vil have overført det enkelte adresse element til placerAdresse funktionen.
Dette sker ved at benytte jQuery metoden bind,
hvorefter vi tilføjer hvert af de nye links til indhold elementet i linje 19.
Hver gang brugeren klikker på et af disse links vil placerAdresse funktionen nu blive kaldt. Dens eneste argument er et
event objekt som indeholder oplysninger omkring klik handlingen og
eventuelle data vi har overført.
I linje 25 forhindrer vi linket i at blive fulgt af browseren ved at kalde jQuery metoden
preventDefault, hvorefter vi i linje 26 finder vores adresse element på
event.data da det var de eneste data vi overførte tilbage i linje 17.
Så opretter vi en placering i linje 28 ved at benytte google.maps.LatLng metoden, hvor vi angiver de længdegrader og breddegrader
vi fandt på vores adresse element. På engelsk hedder det "longitude" og "latitude" og er gemt i et format der hedder
WGS84 som også bruges i
GPS enheder, men ellers behøves vi ikke tænke videre over det.
Slutteligt laver vi et markør objekt i linje 29 til 33 hvor vi angiver vores placering, henviser til vores kort og angiver en titel til vores markør.
Da vi angiver hvilket kort vi bruger igennem map henvisningen bliver markøren vist på vores kort med det samme.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.