Hvordan styres kortet i forhold til data?
Vi har nu fået placeret vores data på kortet i form af små markører, men kortet viser stadig et udsnit af hele Danmark hvor markørerne klumper sig sammen over København. For at kunne se hvor markørerne rent faktisk bliver sat ind skal brugeren selv zoome ind og flytte rundt på kortet.
Derfor vil vi nu se på hvordan vi kan styre kortet så der automatisk zoomes ind på det rette niveau og flyttes rundt på kortes placering.
Når vi opretter en markør angiver vi samtidig dens position på kortet,
ved at tilknytte en placering der blev oprettet gennem Google Maps metoden google.maps.LatLng.
Ved at bruge Google Maps metoden google.maps.LatLngBounds kan vi gemme vores placeringer i en fælles gruppe, efterhånden som de bliver oprettede. Et "bound" er et populært ord for et afgrænset område, og ved at samle vores placeringer i en gruppe får vi dannet et usynligt område på kortet hvor alle placeringerne i gruppen passer indeni.
Vi kan derefter styre kortets placering og zoom niveau ved at bruge Google Maps metoden google.maps.fitBounds.
Den benytter alle placeringerne i vores LatLngBounds gruppe til at beregne hvilken del af verden kortet skal vise, samt i hvilket zoom niveau.
Vores script fil, minkode.js
I linje 41 opretter vi vores fælles gruppe og kalder den placeringer.
Dernæst har vi ændret en smule i funktionen placerAdresse.
Hver gang vi placerer en adresse på kortet opretter vi en ny placering i linje 28 og en ny markør i linje 29 til 32.
I modsætning til før angiver vi ikke med det samme markørens kort. Brugeren kan klikke på den samme adresse flere gange, og hvis vi allerede har indsat markøren på kortet er der ingen grund til at gøre det igen.
Nu hvor vi har dannet vores placering og markør undersøger vi i linje 33 om markøren allerede er blevet indsat på kortet,
ved at se om der er blevet gemt en markør på vores adresse objekt.
Hvis der ikke er tilknyttet en markør på vores adresse objekt udvider vi vores fælles gruppe med den nye placering i linje 34
og angiver hvilket kort markøren skal vises på i linje 35,
ved at bruge Google Maps metoderne extend og setMap.
I linje 36 gemmer vi vores nye markør på adresse objektet, så vi senere kan se om den allerede er blevet indsat på kortet.
Til sidst beder vi kortet om at skifte dens visning til et område af verden hvor alle vores placeringer findes, ved at kalde Google Maps metoden
fitBounds i linje 37.
Derudover er koden uændret i forhold til sidste kapitel.
Når du begynder at klikke på de enkelte links kan du nu se hvordan kortet reagerer efterhånden som vores placeringer og markører bliver oprettede og vist. Ved den første markør er kortet zoomet langt ind, men efterhånden som der vises flere adresser skifter kortet placering og zoomer ud.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.