Sådan opretter du brugerdefineret kortfiltrering på din hjemmeside med Google Maps API

Brugerdefineret kortfiltrering med Google Maps API er processen, hvor du gør det muligt for dine besøgende at sortere fysiske placeringer som butikker, afdelinger, events, boliger, restauranter eller servicepunkter direkte på kortet – baseret på kriterier som kategori, by, afstand, bedømmelse, åbningstider eller position. Typisk hentes en API-nøgle fra Google Cloud, Maps JavaScript API aktiveres, positionsdata forberedes, marker eller cluster logik implementeres, og selve filtreringen sker enten i browseren eller på serveren. En korrekt opsætning gør det let for brugeren at finde det, de søger, øger tiden på siden og løfter konverteringsraten især for lokale søgninger.

I denne guide tager vi dig hele vejen fra teori til praksis – med fokus på hvordan løsningen kan rulles ud på en reel hjemmeside, uanset om det gælder en fragtfirma med 35 filialer, et ejendomssite med 240 annoncer eller en klinikkæde med 12 lokationer. Vi kigger på datamængde, performance og sikkerhed, og sikrer at løsningen lever op til SEO-krav og brugeroplevelse anno 2026: hurtig loading, sikkerhed, mobilvenlighed og fremtidssikring. Hvis din webhosting endnu ikke er klar, er det vigtigt at vælge en stærk platform for optimal performance: Hostragons webhostingløsninger.

Hvad er brugerdefineret kortfiltrering – og hvornår skal det bruges?

Brugerdefineret kortfiltrering handler om at lade brugeren indsnævre visningen af placeringer på kortet ud fra deres egne valg. I et standardkort vises alle punkter samtidig, men med filtrering får brugeren kontrol: De kan fx kun se åbne butikker, afdelinger med bestemte services, klinikker inden for 10 km, eller ejendomsannoncer i en bestemt prisklasse. Det er mere visuelt, hurtigere at afkode og langt mere mobilvenligt end klassiske listesider.

Funktionen er særlig relevant for geografisk fokuserede virksomheder: Afdelingsfindere, restaurantkæder, pakkeshops, hotelbookingsites, eventkalendere, biludlejning, servicepunkter og lokale guides er eksempler. Hvis brugeren efter at have valgt et sted kan ringe, få rutevejledning, booke tid eller bede om tilbud, er kortfiltrering ikke bare en flot feature – men et decideret konverteringsværktøj.

Vælg de rette Google Maps API-komponenter

Google Maps Platform består af flere API’er. Valget afhænger af dine behov. Den mest brugte er Maps JavaScript API, som giver dig kortet på websiden, markers, zoom og styring af brugerinteraktion. Hvis du vil lade brugeren søge på adresse eller firmanavn, skal du bruge Places API. Vil du konvertere adresse til koordinater, er Geocoding API nødvendig. Skal du beregne ruter eller afstand mellem to punkter, bruger du Directions API eller Distance Matrix API.

Til en simpel afdelingsfinder er Maps JavaScript API ofte nok. Skal brugeren indtaste sin egen adresse og finde nærmeste afdeling, skal Geocoding API med. Vil du vise forventet køretid eller distance, skal Distance Matrix API benyttes. Det er vigtigt at definere behovet fra starten – det sparer tid, penge og kodekompleksitet. Overflødige API-kald gør både websiden langsommere og kan øge dine omkostninger.

De nødvendige komponenter til en basisopsætning

• Maps JavaScript API: Til visning og styring af kort samt markers.
• Geocoding API: Til at konvertere adresser til latitude/longitude.
• Places API: Til autocomplete, stedssøgning og berigelse med virksomhedsinformation.
• Distance Matrix API: Til at beregne afstand og tid mellem bruger og punkter.
• Cloud Billing & API-kontrol: Nødvendige indstillinger for sikker og styrbar brug af API-nøglen.

Planlægning: Design filtreringslogikken før du koder

Den vigtigste fase i kortintegration er planlægning – før du skriver en eneste linje kode. Definér hvilke data der skal kunne filtreres, hvordan brugeren vælger, og hvad resultatet skal være. På en klinikside kan filtrene fx være by, specialisering, læge, ledige tider og handicaptilgængelighed. På et ejendomssite: bydel, pris, værelsesantal, type og afstand. For en restaurantkæde: takeaway, parkering, åbningstider og køkken.

Hold det enkelt: De fleste projekter klarer sig med 4-6 grundfiltre i første udgave. Mange flere gør brugeren i tvivl og er svære at administrere på mobile enheder. Hver filter skal matche et ensartet felt i databasen – fx må “kategori” ikke hedde både “kafé”, “cafe” og “coffee shop”, ellers får brugeren forkerte resultater. Datastandardisering er fundamentet for en god kortfiltrering.

Eksempel på datamodel

En afdelingsfinder bør have mindst følgende felter pr. lokation: unik ID, firmanavn, latitude, longitude, by, bydel, kategori, telefon, adresse, åbningstider, aktiv-status og link til detaljer. Udvidet: bedømmelse, lagerstatus, servicetyper, kampagner, billeder og seneste opdatering. Op til ca. 100 punkter kan data håndteres som JSON-fil, men større projekter kræver database og API-endpoints.

Sammenligning: Filtrering i browseren vs. på serveren

Der er to hovedmetoder til kortfiltrering: Browserbaseret (client-side) og serverbaseret (server-side). Ved client-side indlæses alle data på siden, og filtrering sker i browseren. Ved server-side sender brugerens filtervalg en forespørgsel til serveren, og kun relevante resultater returneres. Valget afhænger af datamængde, trafik og sikkerhedskrav.

Praktisk tip: Til en virksomhed med 50 afdelinger er client-side filtrering nok. På et ejendomssite med 500 annoncer bør du bruge server-side. Til et guide-univers med 5.000 punkter anbefales hybrid: kun resultater inden for kortets visningsområde og cluster/pagination.

Guide: Opret brugerdefineret kortfiltrering med Google Maps API

1. Opret Google Cloud-projekt og API-nøgle

Start med at oprette et projekt i Google Cloud Console – navngiv det så det matcher din hjemmeside. Aktiver Maps JavaScript API og de øvrige nødvendige services. Når du har din API-nøgle, så tilføj altid HTTP referrer-restriktioner: fx kun “dinwebside.dk” og “www.dinwebside.dk”. Glemmer du dette, kan nøglen misbruges på andre domæner og give uventede omkostninger.

Google Maps Platform kræver opsætning af en faktureringskonto – det betyder ikke, at alle projekter bliver dyre, men du skal styre kvoter og forbrug. Sæt gerne daglige grænser, mailadvarsler og budgetalarmer op. Skal du klargøre domænet til et projekt, så vælg også en sikker registrar og DNS-løsning: Hostragons domæneregistreringstjenester.

2. Giv kortsiden en stærk teknisk platform

Kortsider er visuelt tunge: mange markers, kortbibliotek, billeder og API-kald påvirker loadhastighed. Dit hostingpakke skal understøtte opdateret PHP, Node.js eller det framework du bruger. Med WordPress skal temaer og plugins holdes i skak. Ved custom software bør API-endpoints caches effektivt.

HTTPS skal være standard til kortintegration: brugeren deler position, formularer og API-kald, som kræver sikker forbindelse. Uden SSL-certifikat risikerer du browseradvarsler og at visse kortfunktioner ikke virker som forventet. Se Hostragons SSL certifikater for relevante løsninger.

3. Standardisér dine positionsdata

Filtreringens præcision afhænger af datakvalitet. Latitude og longitude skal være korrekte for hver placering. Stol ikke kun på adressetekst – det kan give fejlplaceringer. Tjek koordinater manuelt, især i byer med ens gadenavne. Selv 3-5 fejl blandt 100 kan ødelægge brugerens tillid.

Brug ens kategorinavne, hold by og bydel i samme format, skriv telefonnumre internationalt, og skjul inaktive placeringer. Registrér også opdateringsdato, så brugerens info er up-to-date. Hvis åbningstider er forældede, er kortet teknisk ok, men brugeroplevelsen floppet.

4. Synkronisér markers, info-vinduer og resultatlister

Klikker brugeren på en marker, skal der åbnes et infovindue med firmanavn, adresse, telefon, status, rutevejledning og link til detaljer. Samtidig bør en resultatliste til siden eller under kortet opdateres. Når kort og liste er synkroniseret, kan brugeren både se det visuelle og læse det tekstuelle. På mobil bør listen typisk vises under kortet for bedst brugeroplevelse.

Har du mange markers, skal du bruge cluster-funktion: nærliggende punkter samles under ét ikon, så kortet er overskueligt og loader hurtigt. Projekter med over 300 markers bør altid bruge cluster; over 1.000 markers bør kun vise data inden for kortets grænser for optimal performance.

5. Definér filtreringsregler klart og målbart

Filtrenes logik skal være tydelig for brugeren: Er kategori multifilter eller single? Arbejder afstandsfilteret ud fra brugerens aktuelle position eller ud fra byens centrum? Er “åbne steder” baseret på realtid eller manuel status? Disse valg påvirker både software og brugerforventning.

Til afstandsfilter kan du bruge Haversine-formlen eller Google Distance Matrix API. Fugleflugtsafstand er hurtigst og billigst, mens køretid kræver Distance Matrix API. Hvis brugeren leder efter nærmeste døgnåbne service, er køretid relevant; til visning af butikker er fugleflugtsafstand ofte nok.

6. Prioritér mobiloplevelsen

De fleste lokale søgninger sker på mobil. Kortets højde, filterpanel, touch-zoner og resultatliste skal designes til mobile brugere. Filtre bør præsenteres i fold-ud paneler eller tabs for optimal navigation på små skærme. Funktioner som rutevejledning, opkald og WhatsApp skal være tilgængelige med et tryk.

En typisk fejl er at lade kortet fylde hele skærmen, så filtrene bliver skjult. Brugeren vil filtrere først og se resultater bagefter – balancér kort, filter og liste. Hvis brugeren ikke vil dele position, bør de kunne vælge by eller bydel som alternativ.

Performance: Hastighed, kvoter og brugeroplevelse

Performance handler ikke kun om loadtid, men også API-kvoter, datamængde og interaktionshastighed. Indlæs kortbiblioteket kun på relevante sider – lad være med at loade API-script på hele sitet hvis det kun bruges på én side. Vis positionsdata som komprimeret JSON og cache uændrede data. Dette reducerer både serverbelastning og loadtid.

Bruger du billeder i info-vinduer, så vælg WebP og optimer størrelsen – store billeder kan hurtigt sløve kortet, især med mange markers. Hvis kortsiden får meget trafik fra kampagner, skal du vælge en hostingløsning, der kan skalere: Hostragons erhvervshostingløsninger.

• Indlæs Maps API kun hvor nødvendigt.
• Brug cluster ved 300+ markers.
• Server data med gzip/brotli-komprimering.
• Brug indekserede databaser til server-side filtrering.
• Sæt Google Cloud-budgetalarmer for brug.
• Gør filterpanelet let tilgængeligt på mobil.

Sikkerhed: Beskyt API-nøgle og brugerdata

API-nøglen er ikke hemmelig som en adgangskode – den kan ses i browseren. Sikkerhed handler derfor om restriktioner: HTTP referrer, kun nødvendige API'er, kvotegrænser og advarsler mod misbrug. Til server-side skal nøglen gemmes som miljøvariabel og aldrig sendes til klienten.

Brugerens position er følsom data. Forklar altid hvorfor du beder om adgang, og gem ikke brugerens aktuelle position uden grund. Hvis du har behov for det, skal du sikre samtykke, privatlivspolitik og overholde GDPR/KVKK. SSL, backup og opdateret software er fundamentet for sikkerhed: brug af SSL til webstedssikkerhed.

SEO: Sådan optimeres kortfiltreringssider

Kortfiltrering giver god UX, men er ikke nok for SEO. Googlebot forstår ikke altid marker-info på kortet, så vigtige placeringer skal også have tekstindhold i HTML. Afdelingsnavn, adresse, telefon, åbningstider og services bør ikke kun genereres med JavaScript – men også server-side eller i statisk HTML.

For lokal SEO bør hver afdeling have sin egen detaljerede side: fx “København Ø-afdeling” med unik URL, beskrivelse, adresse, rutevejledning og kontaktinfo. Disse sider bør udstyres med LocalBusiness/Organization structured data. Kortfiltreringssiden er til generel udforskning, mens detaljesider giver søgemaskiner klar kontekst – især vigtigt for virksomheder med mange lokationer.

SEO-tjekliste til kortsider

• Brug klare H1, H2 og tekstbeskrivelser på kortsiden.
• Lad ikke vigtige placeringer kun ligge i kort-markers.
• Opret detaljesider for afdelinger/lokationer.
• Planlæg URL-struktur logisk og letforståeligt.
• Test sidehastighed med Core Web Vitals.
• Anvend structured data for lokale virksomheder.
• Tilføj kortsiden til XML sitemap.

Typiske fejl og professionelle løsninger

Den største fejl er at bruge et plugin og ignorere datakvalitet. Det kan være fint for små virksomheder, men der opstår begrænsninger med avanceret filtrering, flere kategorier, afstandsberegning og performance. API-nøglen skal aldrig lanceres uden restriktioner. Mange markers, billeder og scripts uden hastighedstest sløver siden.

Professionel løsning afhænger af projektets omfang: 20 lokationer kan drives med enkel JSON-struktur, 2.000 kræver databaseindeks, server-side filtrering, cache og queries baseret på kortgrænser. På WordPress kan du bruge custom post types og felter. Ved custom software anbefales REST API eller GraphQL for fleksibel arkitektur.

Eksempel: Service-netværk med 80 afdelinger

Lad os tage et realistisk scenario. En virksomhed med 80 servicepunkter i hele Danmark vil lade brugeren filtrere på by, servicetype og åbningstider. Først forberedes data: navn, by, bydel, koordinater, telefon, kategorier og åbningstider til hver punkt. På kortsiden vælger brugeren by, derefter service. Resultatlisten opdateres, og kun relevante markers vises.

Her er client-side filtrering nok – 80 punkter er ikke tungt for browseren. Skal åbningstider håndteres live, skal du tage højde for tidszone og helligdage. Vil du vise nærmeste service baseret på brugerposition, indhentes position og sorteres efter fugleflugtsafstand. Resultatkort bør have opkald, rutevejledning og link til detaljer. Denne type løsning kan reducere unødvendige opkald til support og guide brugeren til den rette afdeling.

Vedligehold og måling: Hvad skal du gøre efter launch?

Opdatering stopper ikke ved lancering. Overvåg Google Cloud-rapporter, Search Console, Analytics og brugermønstre løbende. Track klik på rutevejledning, opkald, filterbrug og sidebesøg som separate events. Det afslører hvilke byer og filtre der er populære, og hvor brugeren evt. går i stå.

Check positionsdata mindst månedligt: lukkede afdelinger, nye telefonnumre, ændrede åbningstider og services skal hurtigt ind i kortet. Større projekter bør have et admin-panel. Hvis API-omkostninger pludselig stiger, undersøg for unødige kald, bottrafik eller forkert loadingstrategi.

Konklusion: Kort der guider brugeren hurtigt skaber værdi

Brugerdefineret kortfiltrering med Google Maps API er ikke bare en teknisk integration – det er strategisk UX og lokal konvertering. Succes kræver korrekt API-valg, datastandardisering, enkel filterlogik, mobilprioritet, sikker API-restriktion og SEO-optimerede placeringstekster.

Vil du gøre dine afdelinger, annoncer eller servicepunkter mere forståelige, bør du først afklare datastruktur og brugerflows. Byg integrationen på en sikker, hurtig og skalerbar platform. Hostragons kan levere hosting, domæne og SSL, så du får et solidt fundament til kortbaserede løsninger: Hostragons webhostingløsninger.

FAQ: Ofte stillede spørgsmål

Er brugerdefineret kortfiltrering med Google Maps API gratis?

Google Maps Platform kræver faktureringskonto og kan koste penge ved højt forbrug. Prisen afhænger af API-type, forespørgsler og kvoter. Sæt budgetalarmer og restriktioner for at holde styr på udgifterne.

Er WordPress nok til kortfiltrering?

Ja, til mindre og mellemstore projekter. Ved avanceret filtrering, mange lokationer eller meget trafik bør du bruge custom udvikling, optimerede databaser og stærk hosting for bedst performance.

Hvordan gør jeg min API-nøgle sikker?

Nøglen kan ses i browseren, så brug HTTP referrer-restriktioner, aktiver kun nødvendige API’er, sæt kvoter og budgetalarmer. Server-side nøgler gemmes som miljøvariabel.

Hvornår bør jeg bruge cluster til markers?

Brug cluster ved 300 eller flere markers. Ved 1.000+ bør du kun indlæse markers inden for kortet og bruge server/hybrid filtrering.

Får jeg bedre SEO med kortfiltrering?

Kortfiltrering i sig selv garanterer ikke bedre placering, men kan øge engagement og lokale konverteringer. For SEO: Sørg for at placeringer har tekst i HTML, opret detaljesider og brug structured data.