Opgrader din Google Maps API: Fra V2 til V3

Hvis du driver et website, der bruger Google Maps, og du stadig kører på den ældre version 2 af Google Maps JavaScript API, er det på høje tid at opgradere. Version 2 blev officielt udfaset den 26. maj 2021, hvilket betyder, at dine kort sandsynligvis allerede viser fejl eller slet ikke fungerer som tiltænkt. Men frygt ikke! Migrering til version 3 er ikke kun nødvendig for at bevare funktionaliteten, men åbner også op for en verden af forbedringer, bedre ydeevne og nye muligheder. Denne omfattende guide vil lede dig gennem processen, trin for trin, og sikre, at dine kort igen leverer en problemfri og dynamisk oplevelse for dine brugere.

Hvorfor opgradere til Google Maps JavaScript API V3?

Den primære og mest presserende årsag til at opgradere er, at Google Maps JavaScript API V2 ikke længere understøttes af Google. Dette betyder, at hvis dine kort pludselig er holdt op med at fungere, er det næsten helt sikkert årsagen. Men udover at løse umiddelbare funktionalitetsproblemer, byder V3 på en række væsentlige forbedringer, der vil løfte din applikation til et højere niveau:

• Forbedret ydeevne: V3 er designet fra grunden til at være lettere og mere responsiv. Dette resulterer i kortere indlæsningstider og en mere flydende interaktion med kortet, hvilket forbedrer den samlede brugeroplevelse.
• Nye funktioner og fleksibilitet: Med V3 får du adgang til en række nye funktioner og mere granulær kontrol over kortet. Dette inkluderer nye korttyper (som terrænkort), forbedret eventhåndtering, og mere avancerede tegneværktøjer, der giver dig større kreativ frihed.
• Bedre understøttelse af mobile enheder: V3 er bygget med mobiloptimering i tankerne. Kortene er mere responsive og fungerer bedre på tværs af forskellige skærmstørrelser og enheder, hvilket er afgørende i dagens mobile verden.
• Klar til fremtiden: Ved at opgradere sikrer du, at din applikation er kompatibel med fremtidige opdateringer og standarder fra Google. Dette mindsker risikoen for yderligere nedbrud og sikrer langvarig stabilitet.
• Klarere navneområde: V3 introducerer google.maps navneområdet, hvilket minimerer navnekollisioner med anden JavaScript-kode på din side og gør din kode mere robust og lettere at vedligeholde.

Overblik over migrationsprocessen

Selvom hver applikation er unik, og omfanget af den nødvendige kodeændring kan variere, er der en række fælles og essentielle trin, som du skal igennem for en succesfuld migration fra V2 til V3. Ved at følge disse trin systematisk kan du strømline processen:

1. Skaf en ny API-nøgle: Google Maps JavaScript API V3 bruger et nyt system til nøgleadministration via Google Cloud Console. Din gamle V2-nøgle vil sandsynligvis ikke fungere, eller den vil ikke give dig adgang til V3's fulde funktionalitet og overvågningsmuligheder.
2. Opdater API-bootstrap: Den måde, du indlæser Google Maps API'en på i din HTML, har ændret sig. Du skal opdatere URL'en og fjerne eller ændre visse parametre.
3. Opdater din kode: Dette er typisk det mest omfattende skridt. Du skal tilpasse din eksisterende JavaScript-kode til V3's nye navnekonventioner, metoder og objektstrukturer. Dette involverer primært at skifte til google.maps navneområdet.
4. Fjern forældede metoder: Mange V2-specifikke hjælpefunktioner og klasser er fjernet i V3. Disse skal identificeres og enten erstattes med moderne JavaScript-alternativer eller simpelthen fjernes, hvis de ikke længere er nødvendige.
5. (Valgfrit) Tilføj biblioteker: V3 har eksternaliseret mange funktioner i valgfrie biblioteker. Dette betyder, at du kun indlæser de dele af API'en, du rent faktisk bruger, hvilket bidrager til bedre ydeevne.
6. Test og iterer: Efter at have foretaget kodeændringerne er det afgørende at gennemteste din applikation grundigt. Vær forberedt på at foretage justeringer og fejlfinding for at sikre, at alt fungerer som forventet.

Få din nye API-nøgle

En af de første og mest fundamentale ændringer, du skal foretage, er at sikre, at du bruger en V3-kompatibel API-nøgle. Hvis din nuværende nøgle, som du kan finde i URL'en, hvor du indlæser API'en, starter med "ABQIAA", er det en V2-nøgle, og den skal opdateres. En V3-nøgle giver dig en række vigtige fordele, der går ud over blot at få kortene til at virke:

• Overvågning af API-forbrug: Med en V3-nøgle kan du nemt spore og overvåge dit API-forbrug direkte i Google Cloud Console. Dette er essentielt for at forstå brugen af din applikation og for at undgå uventede gebyrer.
• Mulighed for at købe yderligere kvote: Hvis din applikation vokser og dit kortforbrug stiger, giver V3-nøglen dig mulighed for nemt at købe yderligere API-kvote, så dine brugere altid har adgang til kortene.
• Kommunikation fra Google: Nøglen giver Google en direkte kanal til at kommunikere vigtige opdateringer, ændringer eller potentielle problemer vedrørende din applikation.

Du genererer en ny API-nøgle via Google Cloud Console under "API'er og tjenester" > "Legitimationsoplysninger". Sørg for at aktivere de nødvendige Maps API'er (f.eks. Maps JavaScript API). Vær opmærksom på, at hvis du er kunde af Google Maps Platform Premium Plan og bruger et klient-ID (parameteren client i stedet for key), er dette stadig kompatibelt med V3, og du behøver ikke en ny nøgle. Klient-ID'er giver lignende fordele som V3 API-nøgler.

Indlæsning af API'en

Den måde, du indlæser Google Maps JavaScript API på i din HTML-fil, er blevet ændret markant fra V2 til V3. Dette er en af de første kodeændringer, du skal foretage. I V2 indlæste du typisk API'en via en anmodning til http://maps.google.com/maps. I V3 skal du foretage følgende justeringer:

• Ny URL: Indlæs API'en fra //maps.googleapis.com/maps/api/js. Dette er den nye standard endepunkt for V3 API'en.
• Fjern file parameteren: Denne parameter er ikke længere relevant i V3 og skal fjernes.
• Opdater key parameteren: Erstat din gamle V2-nøgle med din nye V3-nøgle. For kunder med Google Maps Platform Premium Plan skal client parameteren stadig bruges.
• (Valgfrit) Sproglokalisation: Parameteren hl (host language) er erstattet af language. Du kan bevare dens værdi (f.eks. language=da for dansk) for at vise kortets brugergrænseflade på det relevante sprog.
• (Valgfrit) Biblioteker: V3 giver dig mulighed for kun at indlæse de funktioner, du har brug for, via libraries parameteren. Tilføj denne parameter for at indlæse valgfrie biblioteker, som f.eks. geometry eller drawing, hvis din applikation bruger disse funktioner.
• Versionsstyring: Du kan fjerne v parameteren helt for at sikre, at du altid indlæser den senest udgivne stabile version af API'en, eller du kan specificere en bestemt version (f.eks. v=3.50) for at låse til en specifik udgivelse.

Eksempel på V2-indlæsning (tysk):

<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>

Eksempel på V3-indlæsning (tysk):

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>

For den simpleste V3-indlæsning, hvor du kun behøver de grundlæggende kortfunktioner og ingen specifik sprogindstilling, behøver du kun din API-nøgle:

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Navneområdet google.maps

Den mest markante og systematiske ændring i Google Maps JavaScript API V3 er introduktionen af google.maps navneområdet. I V2 blev alle API-objekter placeret direkte i det globale navneområde, hvilket kunne føre til utilsigtede navnekollisioner med anden JavaScript-kode på din side. I V3 er alle API-objekter nu elegant indkapslet inden for google.maps.* navneområdet, hvilket gør din kode mere modulær og robust.

Det betyder, at når du migrerer din applikation til V3, skal du omhyggeligt gennemgå din kode og opdatere alle referencer til API-objekter til at bruge dette nye navneområde. En simpel "find og erstat" fra "G" til "google.maps" vil desværre ikke fungere fuldt ud på grund af navneændringer, men det er en god generel retningslinje, når du manuelt gennemgår din kode. Her er nogle eksempler på ækvivalente klasser i V2 og V3, der illustrerer denne ændring:

Fjern forældet kode

Mens Google Maps JavaScript API V3 tilbyder funktionelle paralleller til de fleste af V2's funktioner, er der en række klasser og metoder, der simpelthen er blevet forældede eller fjernet helt. Som en del af din migrationsproces er det essentielt at identificere disse og enten erstatte dem med tilsvarende V3-funktionalitet, tredjepartsbiblioteker eller fjerne dem, hvis de ikke længere er nødvendige for din applikation. Populære JavaScript-biblioteker som Closure eller jQuery kan ofte levere lignende hjælpefunktionalitet, som tidligere var indbygget i V2.

Eksempler på klasser og metoder fra V2, der ikke har en direkte ækvivalent i V3:

• GBounds
• GLanguage
• GBrowserIsCompatible: Denne metode er ikke længere nødvendig, da V3 er designet til at være bredt kompatibel med moderne browsere, og den automatiske browserkontrol er fjernet.
• GControl: I V3 håndteres brugerdefinerede kontroller ved at oprette DOM-elementer og tilføje dem til kortets map.controls array, hvilket giver større fleksibilitet.
• GLog: En simpel logningsfunktion, der kan erstattes med standard console.log().
• GDownloadUrl: Denne hjælpefunktion til at hente data er erstattet af standard JavaScript AJAX-metoder som fetch() API'en eller XMLHttpRequest.
• GUnload: Denne metode, der blev brugt til at rydde op i hukommelsen ved sideafslutning, er ikke længere nødvendig i V3, da API'en nu håndterer hukommelsesrydning automatisk.
• Alle GGoogleBar* relaterede klasser: Disse var relateret til en forældet Google Bar-funktion.
• Alle GStreetview* relaterede klasser: Street View-funktionaliteten er nu en integreret del af google.maps.StreetViewService og google.maps.StreetViewPanorama objekterne i V3, hvilket giver en mere strømlinet adgang.

Det er afgørende at gennemgå din eksisterende V2-kode og omhyggeligt identificere alle referencer til disse forældede klasser og metoder for at sikre en ren og fejlfri migrering.

Kode sammenligning: V2 vs. V3

For at give et klarere billede af de syntaktiske og strukturelle forskelle mellem Google Maps JavaScript API V2 og V3, lad os se på et simpelt eksempel. Begge kodeblokke viser et grundlæggende kort med en enkelt markør i Palo Alto, Californien, men implementeret med de respektive API-versioner.

V2 Eksempel

<!DOCTYPE html><html><head> <script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script> <style> html, body, #map { height: 100%; margin: 0; } </style> <script> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById('map')); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault(); map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419))); } } </script></head><body onload="initialize()" onunload="GUnload()"> <div id="map"></div></body></html>

V3 Eksempel

<!DOCTYPE html><html><head> <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <style> html, body, #map { height: 100%; margin: 0; } </style> <script> function initialize() { var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: new google.maps.LatLng(37.4419, -122.1419), map: map }); } google.maps.event.addDomListener(window, 'load', initialize); </script></head><body> <div id="map"></div></body></html>

Nøgleforskelle i eksemplet:

• API-indlæsningsadresse: Som tidligere nævnt er URL'en for indlæsning af API'en ændret fra maps.google.com/maps?file=api... til maps.googleapis.com/maps/api/js?....
• Fjernelse af GBrowserIsCompatible() og GUnload(): Disse hjælpefunktioner er ikke længere nødvendige i V3 og er derfor fjernet fra koden. V3 håndterer browserkompatibilitet og hukommelsesrydning automatisk.
• Kortobjekt: Det centrale kortobjekt GMap2 er erstattet af google.maps.Map, hvilket afspejler brugen af det nye navneområde.
• Kortindstillinger: I V2 blev kortindstillinger som center og zoom ofte sat via separate metoder (f.eks. map.setCenter()). I V3 sættes egenskaber som center, zoom og mapTypeId nu via et enkelt MapOptions objekt, der sendes som andet argument til google.maps.Map konstruktøren.
• Standard UI: I V2 skulle du eksplicit kalde map.setUIToDefault() for at aktivere standard brugergrænsefladen (zoom-, panoreringskontroller osv.). I V3 er standard brugergrænsefladen aktiveret som standard. For at deaktivere den, skal du sætte disableDefaultUI: true i MapOptions.
• Håndtering af indlæsningsbegivenhed: I stedet for at bruge onload="initialize()" direkte i body-tagget, som var almindeligt i V2, bruges google.maps.event.addDomListener(window, 'load', initialize); i V3 for bedre praksis og for at sikre, at kortet initialiseres, når DOM er fuldt indlæst.

Detaljeret reference for migration

Denne sektion giver en dybdegående sammenligning af de mest populære funktioner og objekter i V2 og V3 af Google Maps JavaScript API. Hver undersektion er designet til at give dig specifikke migrationsinstruktioner for de mest almindelige brugsscenarier.

Håndtering af Begivenheder (Events)

Eventmodellen i Google Maps JavaScript API V3 er konceptuelt lig den i V2, men implementeringen og navneområdet er ændret markant fra GEvent til google.maps.event. V3 introducerer desuden en ny type event til MVC-tilstandsændringer, som typisk er navngivet med konventionen property_changed (f.eks. zoom_changed). Disse events afspejler ændringer i API-objekternes interne tilstand.

V2 Event Listener:

GEvent.addListener(map, 'click', function() { alert('Du klikkede på kortet.');});

V3 Event Listener:

google.maps.event.addListener(map, 'click', function() { alert('Du klikkede på kortet.');});

Fjernelse af Event Listeners: For at optimere ydeevnen er det god praksis at fjerne event listeners, når de ikke længere er nødvendige. Begge versioner returnerer et opakt objekt (GEventListener i V2, MapsEventListener i V3), når du opretter en listener. Dette objekt bruges til at fjerne listeneren:

// V2var listener = GEvent.addListener(map, 'click', myFunction);GEvent.removeListener(listener);// V3var listener = google.maps.event.addListener(map, 'click', myFunction);google.maps.event.removeListener(listener);

DOM Begivenheder: Hvis du ønsker at fange og reagere på DOM-begivenheder (Document Object Model), f.eks. klik på et HTML-element inden for kortet, giver V3 den statiske metode google.maps.event.addDomListener(). Denne er ækvivalent med V2's GEvent.addDomListener().

Brug af argumenter i begivenheder: UI-begivenheder sender ofte et event-argument til callback-funktionen, som kan indeholde nyttig information. I V3 er disse argumenter generelt forenklet for at være mere konsistente med API'ens objekter. En vigtig forskel er, at V3 ikke længere inkluderer et overlay argument i kortets klik-events. Hvis du registrerer et click event på et V3-kort, vil callback'en kun blive udført, når brugeren klikker på selve kortbaggrunden. Hvis du har brug for at reagere på klik på overlays (f.eks. markører eller polylinjer), skal du registrere separate klik-callbacks direkte på de pågældende overlay-objekter.

Kortkontroller (Controls)

Google Maps JavaScript API viser brugergrænsefladekontroller, der giver brugerne mulighed for at interagere med dit kort. Måden, du tilføjer og tilpasser disse kontroller på, er markant ændret i V3. I stedet for at tilføje kontroller direkte via en metode på kortobjektet, specificerer du dem nu via MapOptions objektet, når du initialiserer kortet.

Tilføjelse af kontroller:

V2:

map.addControl(new GMapTypeControl());map.addControl(new GScaleControl());

V3:

var myOptions = { center: new google.maps.LatLng(-25.363882, 131.044922), zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, // Aktiver korttypekontrol scaleControl: true // Aktiver skalakontrol};var map = new google.maps.Map(document.getElementById('map'), myOptions);

Bemærk, at V3 understøtter yderligere korttyper, inklusive terrænkort, og muligheden for at tilføje brugerdefinerede korttyper. Den hierarkiske V2-kontrol, GHierarchicalMapTypeControl, er ikke længere tilgængelig. Du kan opnå en lignende effekt med google.maps.MapTypeControlStyle.HORIZONTAL_BAR.

Placering af kontroller: I V2 tog addControl() metoden en valgfri anden parameter, der lod dig specificere kontrolens position i forhold til kortets hjørner. I V3 konfigureres placeringen af en kontrol via position-egenskaben inden for kontrolindstillingerne (f.eks. google.maps.ControlPosition.TOP_LEFT). Placeringen af disse kontroller er ikke absolut. I stedet fordeler API'en dem intelligent omkring eksisterende kortelementer eller andre kontroller, hvilket sikrer, at standardkontroller er kompatible med dine brugerdefinerede kontroller.

V2 (med placering):

map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10)));map.addControl(new GScaleControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));

V3 (med placering):

var myOptions = { center: new google.maps.LatLng(-25.363882, 131.044922), zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_LEFT }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_RIGHT }};var map = new google.maps.Map(document.getElementById('map'), myOptions);

Brugerdefinerede kontroller: I V2 oprettede du brugerdefinerede navigationskontroller ved at subklasse GControl klassen. I V3 er der ingen direkte ækvivalent til GControl. I stedet repræsenteres kontroller som DOM-elementer. For at tilføje en brugerdefineret kontrol med V3 API'en skal du oprette en DOM-struktur for kontrollen (f.eks. et <div> element) og tilføje event listeners for at håndtere eventuelle DOM-begivenheder. Dette DOM-element skubber du derefter ind i kortets controls[position] array for at tilføje en instans af den brugerdefinerede kontrol til dit kort.

Overlays

Overlays er grafiske objekter, du "tilføjer" til kortet for at designere specifikke punkter, linjer, områder eller sæt af objekter. Typerne af objekter, der repræsenteres af et overlay, er stort set de samme mellem V2 og V3, men måden de håndteres på, er forskellig.

Tilføj og fjern Overlays

I V2 blev overlays tilføjet og fjernet fra kortet med addOverlay() og removeOverlay() metoderne på GMap2 objektet. I V3 tildeler du et kort til et overlay enten via map-egenskaben i det tilhørende options-objekt, når du opretter overlay'et, eller ved at kalde setMap()-metoden direkte på overlay-objektet og specificere det kort, du ønsker at knytte det til. For at fjerne et overlay, sætter du map-egenskaben til null.

V2:

map.addOverlay(new GMarker(latLng));map.removeOverlay(marker);

V3:

var marker = new google.maps.Marker({ position: latLng, map: map // Tilføjer markøren direkte til kortet});marker.setMap(null); // Fjerner markøren fra kortet

Vigtigt er, at der ikke findes en clearOverlays() metode i V3. Hvis du ønsker at administrere et sæt overlays og fjerne dem alle på én gang, skal du selv oprette et array, der indeholder dem, og derefter iterere over dette array for at kalde setMap(null) på hver enkelt overlay.

Trækbare Markører (Draggable Markers)

Markører er som standard vælg- og klikbare, men ikke trækbare. Du aktiverer denne funktion ved at sætte draggable-egenskaben til true i markørens indstillinger.

V2:

var marker = new GMarker(latLng, { draggable: true });map.addOverlay(marker);

V3:

var marker = new google.maps.Marker({ position: myLatLng, draggable: true, map: map});

Brugerdefinerede ikoner

Du kan definere et brugerdefineret billede, der skal vises i stedet for standardmarkøren. I V2 oprettede du en instans af GIcon og modificerede den, ofte med en imageMap for at definere et klikbart område. V3 forenkler denne proces. Du skal blot sætte markørens icon-egenskab til URL'en for dit brugerdefinerede billede, og API'en justerer automatisk ikonets størrelse. Hvis du har brug for et komplekst ikon med en specifik klikbar form, bruger du shape-egenskaben.

V2 (med shape for klikbarhed):

var flagIcon = new GIcon(G_DEFAULT_ICON);flagIcon.image = '/images/beachflag.png';flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18, 1]; // Definerer klikbart område map.addOverlay(new GMarker(bbLatLng, { icon: flagIcon }));

V3 (med shape for klikbarhed):

var shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly'};var bbMarker = new google.maps.Marker({ icon: '/images/beachflag.png', // URL til billedet shape: shape, // Definerer klikbart område position: bbLatLng, map: map});

Vær opmærksom på, at skygger på markører ikke længere understøttes direkte i V3.

Polylinjer (Polylines)

En polylinje består af et array af LatLng-punkter, der er forbundet af en række linjesegmenter i en bestemt rækkefølge. Oprettelse og visning af et Polyline-objekt i V3 er konceptuelt meget lig brugen af et GPolyline-objekt i V2.

V2:

var polyline = new GPolyline([ new GLatLng(47.3690239, 8.5380326), new GLatLng(1.352083, 103.819836), new GLatLng(-33.867139, 151.207114)], '#FF0000', 3, 0.5, { geodesic: true });map.addOverlay(polyline);

V3:

var polyline = new google.maps.Polyline({ path: [ new google.maps.LatLng(47.3690239, 8.5380326), new google.maps.LatLng(1.352083, 103.819836), new google.maps.LatLng(-33.867139, 151.207114) ], strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 3, geodesic: true});polyline.setMap(map);

Kodede Polylinjer (Encoded Polylines)

I V3 understøttes direkte oprettelse af Polyline-objekter fra kodede polylinjestreng ikke længere direkte i konstruktøren. I stedet skal du bruge metoder fra geometry-biblioteket til at afkode polylinjen. Dette bibliotek skal indlæses separat via libraries parameteren i din script-tag.

V2:

var polyline = new GPolyline.fromEncoded({ points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H', levels: 'PPP', zoomFactor: 2, numLevels: 18, color: '#ff0000', opacity: 0.8, weight: 3});map.addOverlay(polyline);

V3:

<!-- Husk at indlæse 'geometry' biblioteket i din script-tag: --><!-- <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script> -->var polyline = new google.maps.Polyline({ path: google.maps.geometry.encoding.decodePath('kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'), strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 3,});polyline.setMap(map);

Polygoner (Polygons)

Polygoner definerer en region inden for en lukket sløjfe. Ligesom Polyline-objektet består Polygon-objekter af en række punkter i en bestemt rækkefølge. V3's Polygon-klasse er meget lig V2's GPolygon, med den bemærkelsesværdige undtagelse, at du i V3 ikke længere behøver at gentage det første punkt i slutningen af stien for at lukke sløjfen. API'en lukker automatisk enhver polygon ved at tegne en streg, der forbinder den sidste koordinat med den første.

V2 (Bermudatrekanten):

var bermudaTriangle = new GPolygon([ new GLatLng(25.774252, -80.190262), new GLatLng(18.466465, -66.118292), new GLatLng(32.321384, -64.75737), new GLatLng(25.774252, -80.190262) // Gentaget startpunkt], '#FF0000', 2, 0.8, '#FF0000', 0.35);map.addOverlay(bermudaTriangle);

V3 (Bermudatrekanten):

var bermudaTriangle = new google.maps.Polygon({ paths: [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737) // Ingen gentagelse af startpunkt ], strokeColor: '#FF0000', strokeWeight: 2, strokeOpacity: 0.8, fillColor: '#FF0000', fillOpacity: 0.35});bermudaTriangle.setMap(map);

Redigerbare former

Det er muligt at gøre både polylinjer og polygoner redigerbare af brugeren direkte på kortet.

V2:

polyline.enableEditing();

V3:

polyline.setEditable(true);

For mere avancerede tegnefunktioner, herunder tegneværktøjer til at lade brugere tegne former direkte på kortet, se tegnebiblioteket i V3-dokumentationen. Dette bibliotek giver en robust ramme for at tilføje og redigere geometriske former.

InfoWindow (Informationsvinduer)

Et InfoWindow viser indhold i et flydende vindue over kortet. Der er nogle vigtige forskelle mellem InfoWindows i V2 og V3, som du skal være opmærksom på under migreringen:

• V2 API'en understøtter kun ét GInfoWindow per kort ad gangen, hvilket begrænsede applikationsdesign. V3 API'en understøtter derimod flere InfoWindows samtidigt på hvert kort, hvilket giver større fleksibilitet.
• V3's InfoWindow forbliver åben, når du klikker et andet sted på kortet. V2's GInfoWindow lukkede automatisk, når du klikkede på kortet. For at emulere V2-adfærden i V3, skal du selv tilføje en klik-listener på Map-objektet, der lukker InfoWindow'et.
• V3 API'en tilbyder ikke indbygget support for InfoWindow med faner, som var en funktion i V2. Hvis du har brug for faner, skal du implementere denne funktionalitet selv med standard HTML og JavaScript.

V2:

var infoWindow = new GInfoWindow(map, marker.getPoint(), marker.getHtml());infoWindow.openInfoWindow();

V3:

var infoWindow = new google.maps.InfoWindow({ content: 'Indhold af vindue', position: marker.getPosition() // Eller et specifikt LatLng});infoWindow.open(map, marker); // Åbner vinduet og forbinder det til markøren

Ground Overlays (Billedoverlejringer)

For at placere et billede (f.eks. et historisk kort eller en bygningstegning) på et Google Maps-kort, skal du bruge et GroundOverlay-objekt. Konstruktøren for et GroundOverlay er i det væsentlige den samme i V2 og V3: du specificerer URL'en til et billede og billedets geografiske grænser (bounds) som parametre.

V2:

var bounds = new GLatLngBounds(new GLatLng(40.716216, -74.213393), new GLatLng(40.765641, -74.139235));var overlay = new GGroundOverlay('http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg', bounds);map.addOverlay(overlay);

V3:

var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(40.716216, -74.213393), new google.maps.LatLng(40.765641, -74.139235));var overlay = new google.maps.GroundOverlay('http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg', bounds);overlay.setMap(map);

Ofte stillede spørgsmål (FAQ)

Her er svar på nogle almindelige spørgsmål, der ofte opstår under migreringen til Google Maps JavaScript API V3:

Q: Hvornår stoppede Google Maps API V2 med at virke?

A: Google Maps JavaScript API V2 stoppede med at være tilgængelig og understøttet den 26. maj 2021. Efter denne dato vil kort, der stadig bruger V2, typisk vise JavaScript-fejl og ikke fungere korrekt.

Q: Skal jeg have en ny API-nøgle til V3?

A: Ja, i de fleste tilfælde. Hvis din nuværende nøgle starter med "ABQIAA", er det en V2-nøgle, og du skal generere en ny V3-kompatibel nøgle via Google Cloud Console. Kunder med Google Maps Platform Premium Plan, der bruger et klient-ID, behøver dog ikke en ny nøgle, da klient-ID'er stadig understøttes i V3.

Q: Hvad er den største kodeændring, jeg skal være opmærksom på?

A: Den største og mest systematiske ændring er introduktionen af google.maps navneområdet. Alle objekter og klasser, der tidligere var globale (f.eks. GMap2, GLatLng), er nu indkapslet i dette navneområde (f.eks. google.maps.Map, google.maps.LatLng). Dette kræver en omfattende gennemgang af din kode.

Q: Kan jeg bruge mine eksisterende V2-markører og polylinjer direkte i V3?

A: Nej, du kan ikke genbruge selve V2-objekterne direkte. Du skal opdatere koden, der opretter disse objekter, til V3's syntaks og klasser (f.eks. google.maps.Marker, google.maps.Polyline). Selve dataene, såsom koordinater og indhold, kan dog genbruges.

Q: Hvad skal jeg gøre med forældede metoder som GDownloadURL?

A: Forældede metoder skal fjernes og erstattes med moderne JavaScript-alternativer. For GDownloadURL kan du bruge standard AJAX-metoder som fetch() API'en eller XMLHttpRequest til at hente data. For andre fjernede hjælpefunktioner kan tredjepartsbiblioteker eller standard JavaScript-funktioner ofte tilbyde lignende funktionalitet.

Q: Hvor kan jeg finde mere information og hjælp under migreringen?

A: De bedste ressourcer er den officielle Google Maps JavaScript API V3 udviklerdokumentation, API-referencen, og Stack Overflow-fællesskabet (søg efter "google-maps" eller "google-maps-api-3" tags for at finde relevante spørgsmål og svar). Googles Geo Developers blog er også en god kilde til de seneste opdateringer og tips.

Opsummering

Denne omfattende guide har givet dig et solidt overblik over de vigtigste punkter og trin involveret i migreringen fra den forældede Google Maps JavaScript API V2 til den moderne og kraftfulde V3. Selvom processen kan virke omfattende og kræve en del kodejusteringer, er fordelene ved en opdateret, hurtigere og mere funktionsrig kortapplikation betydelige. Ved at følge de skitserede trin – herunder opdatering af din API-nøgle og indlæsningsmetode, tilpasning til google.maps navneområdet, håndtering af forældet kode og omstrukturering af dine overlays og kontroller – er du godt på vej til at få dine kort til at fungere optimalt igen.

Husk at bruge den officielle dokumentation og udviklerfællesskaberne som din primære kilde til yderligere information og specifikke løsninger, da de dækker alle de detaljer, der måtte opstå i din unikke applikation. Migreringen er en investering i din applikations fremtid og ydeevne. God fornøjelse med migreringen!

Hvis du vil læse andre artikler, der ligner Opgrader din Google Maps API: Fra V2 til V3, kan du besøge kategorien Teknologi.