Et kort på en WordPress-side kan lægges ind med en embed-kode. Det føles som at hænge et billede op. Hurtigt. Nemt. Uden opsætning. Embed henter kortet fra Google via et iframe, kræver ingen API-nøgle og tager få minutter for en enkelt adresse eller markør.
Plugins giver mere kontrol over design og flere lokationer på én gang. Kort kan genbruges på tværs af sider, størrelser styres responsivt, og udseendet holdes ens i temaet. Det sparer tid senere, især når der skal ændres noget flere steder.
En simpel kontaktside? Embed er ofte hurtigst og mest ukompliceret. Ingen plugin-opdateringer og færre konflikter med temaer.
Behov for dynamik som filtrering, flere pins, eller lazy load for hurtigere indlæsning på mobile forbindelser? Plugins gør arbejdet nemmere og giver en bedre oplevelse over tid.
Nedenfor følger en kort trin-for-trin guide til begge metoder, så læseren kan vælge rigtigt første gang.
Sådan henter du Google Maps embed-koden trin for trin uden API
Det tager få minutter at hente en Google Maps embed-kode, helt uden API-nøgler, logins eller fakturering for standardkort. Alt sker direkte i browseren.
Åbn maps.google.com, og søg den adresse, der skal vises. Klik på “Del” (Share) ved stedets info, og vælg derefter fanen “Indlejr et kort” (Embed a map).
Her vælger man kortets størrelse: Small, Medium, Large eller Custom. Custom lader dig sætte bredde og højde i pixels, så det passer præcist til dit design. Sæt efterfølgende bredden til 100% for et responsivt kort, så det ser godt ud på både mobil og desktop.
Juster udsnittet, før koden kopieres. Flyt kortet og zoom ind eller ud, til visningen er korrekt. Position og zoom gemmes i URL’en i iframe-koden, så det valgte udsnit følger med.
Skal kortet have en anden visning, fx satellit eller terræn, så skift stil i Google Maps, før du deler. Embed-koden bruger den valgte stil fra Google Maps. Avancerede tweaks som skjulte etiketter kræver normalt andre løsninger end standard-embed.
De vigtigste trin:
- Åbn maps.google.com og søg adressen
- Klik “Del”, vælg “Indlejr et kort”
- Vælg størrelse Small/Medium/Large eller Custom
- Finjustér placering og zoom, før du kopierer
Få mere kontrol med Superb Addons og Google Maps-blokken i Gutenberg
Installationen er enkel: åbn WordPress-dashboard, vælg Plugins → Tilføj ny, søg efter “Superb Addons”, tryk Installer og derefter Aktiver. Efter aktivering ligger Google Maps-blokken klar i blok-oversigten.
Placering sættes præcist med adresse eller koordinater. Zoomniveauet justeres for at ramme den ønskede detaljegrad. Højden angives i blokken, og bredden kan være fuld eller have luft via padding, så kortet passer ind i layoutet.
På mobil giver det mening at slå drag og scroll-zoom fra for at undgå fejltryk. Designet er fleksibelt. Marker-ikonet skiftes efter behov, info-boksens farver tilpasses resten af sitet, og typografien følger temaets indstillinger via theme.json for et ensartet udtryk.
Flere lokationer? Markører kan gemmes som genanvendelige blokke. Det sparer tid og holder visningen ens på tværs af sider.
Ydelsen er tænkt ind. Lazy load slås til i blokkens indstillinger. Har serveren deferred loading eller load on interaction, aktiveres det for hurtigere første visning, ofte 200 – 600 ms på delte webhoteller. Alt dette virker uden API-nøgler eller ekstra scripts.
Hvornår et plugin slår embed, og hvad du gør som næste skridt
Når målet er én adresse og hurtig opsætning uden vedligeholdelse, giver embed-metoden mest mening. Opsætningen tager ofte 3 – 5 minutter, uden konfiguration eller plugins. Koden passer til simple sider, hvor der ikke er brug for specialdesign eller ekstra funktioner.
Flere adresser, præcis kontrol over højde og breakpoints, farveskift eller genbrug af samme kort på flere sider kræver en anden løsning. Et plugin som Superb Addons sparer tid på sigt. Der er fuld styring direkte i Gutenberg med blokke, bedre mobilopsætning og ensartet design. Det hele uden API-nøgler i starten.
Det er smart at teste begge løsninger i et udkast og måle performance med Lighthouse før udgivelse. Fokus på LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) og Total Blocking Time giver klar indsigt i brugeroplevelsen. En lazy-loaded plugin-blok kan matche, og nogle gange overgå, en rå iframe under folden.
Behov for Places Details, geokodning eller ruteplanlægning via Google Maps Platform kræver API-nøgler. Start simpelt med embed først, så kan løsningen vokse trin for trin, og unødvendige komplikationer holdes ude i begyndelsen.
Skriv et svar