Trenger du et interaktivt kart på WordPress-nettstedet ditt, og holder ikke standard Google Maps mål? Et standard iframe-kart gir deg ikke klikkbare regioner, verktøytips eller et filtrerbart objektregister. Og kunden din vil ha et kart med adressesøk og fargekodede regioner for statistikk.

MapSVG er ett av de få WordPress-tilleggene som håndterer alt dette i ett verktøy. Det brukes av over 16 000 nettsteder, og gratisversjonen på WordPress.org lar deg prøve nesten alle grunnfunksjonene uten å betale. Nedenfor finner du en detaljert gjennomgang av funksjoner, en praktisk oppsettsguide og en ærlig vurdering av hvem dette tillegget passer for, og hvem som bør se seg om etter noe annet.

💡 Hurtigoversikt:

• Last inn et ferdig SVG-kart fra det innebygde biblioteket eller last opp din egen fil.
• Koble databaseobjekter med egendefinerte felt til regioner.
• Konfigurer verktøytips og popup-vinduer via malredigereren.
• Legg eventuelt vektorkartet oppå Google Maps.
• Sett inn kortkoden på en side og sjekk resultatet.

Hva MapSVG kan gjøre: en gjennomgang av nøkkelfunksjoner

Tillegget er utviklet av Roman Stepanov (RomanCode på WordPress.org). Prosjektet har vært aktivt siden 2012 og mottar jevnlige oppdateringer: per juni 2026 er versjon 8.6.6 gjeldende, med flere utgivelser per måned ifølge endringsloggen. Dette er viktig for et tillegg som jobber med Google Maps API-et, siden kart slutter å virke når API-nøkkelen endres uten jevnlige oppdateringer.

100+ Ferdige geokalibrerte kart

Tillegget leveres med et bibliotek på mer enn 100 geokalibrerte SVG-kart. Verdenskartet er allerede inndelt i klikkbare land. Landkart med inndelinger i delstater, provinser og regioner er tilgjengelige separat. Det finnes også flere spesialkart.

Geokalibrering betyr at hvert område på kartet er knyttet til ekte koordinater. Du kan legge til markører etter adresse eller breddegrad/lengdegrad, og de havner nøyaktig på riktig region. Finner du ikke riktig kart i biblioteket? Tegn en SVG i Inkscape eller Adobe Illustrator, last den opp til MapSVG, og tillegget gjør vektoren din om til et interaktivt kart med klikkbare soner.

Databaseobjekter med egendefinerte felt

Denne funksjonen skiller MapSVG fra de fleste WordPress-karttillegg. Du oppretter oppføringer (objekter) i tilleggets innebygde database med det feltsettet du trenger: tekst, tall, bilder, avkrysningsbokser, nedtrekkslister. Deretter kobler du et objekt til en bestemt kartregion.

Eksempel: et eiendomsmeglerfirma oppretter objekter for eiendommer med adresse, pris, areal og bilder. Hvert objekt er knyttet til en region på kartet. En besøkende klikker på et område og ser eiendomskortet i et vakkert popup-vindu, detaljvisning eller verktøytips. Du trenger ikke noe eksternt tillegg for datalagring; alt holder seg inne i MapSVG.

Register med filtrering og søk

Databaseobjekter kan vises ikke bare på kartet, men også som et filtrerbart register ved siden av det. Når en bruker skriver inn et søk i søkefeltet eller velger en verdi fra et nedtrekksfilter, oppdateres registeret og kartet synkront. Å klikke på en kartregion filtrerer registeret, og omvendt.

Premiumversjoner legger til filtre etter kategori, postnummer og dato. CSV-import støttes, og fra og med Plus-nivået kan data hentes direkte fra Google Sheets (når kilden oppdateres, oppdateres kartet automatisk).

Vektorkartoverlegg på Google Maps

Standard Google Maps via iframe gir nesten ingen tilpasningsmuligheter. MapSVG løser dette problemet radikalt: du legger ditt eget interaktive SVG-lag oppå Google Maps av enhver type (satellitt, terreng, veikart, hybrid). Alt du trenger er en Google Maps API-nøkkel.

Vektorlaget er fullt klikkbart: soner, markører og verktøytips fungerer akkurat som på et vanlig SVG-kart. Resultatet er et kart som ser ut som Google Maps, men oppfører seg som en fullstendig skreddersydd webapplikasjon. Fremheving av landemerker, interaktive ruter og regioner kan alt konfigureres.

Innebygde redigeringsverktøy for CSS, JavaScript og Handlebars-maler

For deg som jobber med kode, tilbyr MapSVG tre innebygde editorer. CSS-editoren lar deg endre stiler for tooltips, popup-vinduer og markører mens du ser resultatet i sanntid. JavaScript-editoren lar deg koble deg på karthendelser (klikk på region, hover) og skrive mellomvarelogikk. Handlebars-maleditoren gir deg full kontroll over HTML-strukturen for tooltips, popover-vinduer og detaljvisninger.

I praksis betyr dette at en tooltip-mal med bilde, pris og en «Les mer»-knapp kan bygges på fem minutter. Og via JavaScript kan du for eksempel sende en AJAX-forespørsel ved klikk på en region og laste inn data dynamisk.

Kontrollpanel med forhåndsvisning i sanntid

MapSVG-grensesnittet er et dedikert panel inne i WordPress-admin. Kartoppretting er en trinnvis prosess: velg kilde, konfigurer regioner, farger, tooltips, publiser. Alle endringer vises umiddelbart i forhåndsvisningsvinduet; du trenger ikke å lagre og oppdatere siden for å se resultatet.

Navigasjonen fungerer via en nedtrekksmeny organisert etter seksjoner (Regioner, Farger, Maler, Innstillinger). Grensesnittet kan virke overveldende for nybegynnere siden det er mange valg, men etter den første timen blir logikken tydelig.

Kart fra rasterbilder

MapSVG fungerer ikke bare med vektor-SVG-er, men også med vanlige PNG- og JPEG-filer. Innebygde tegneverktøy lar deg spore områder over et rasterbilde, og de blir klikkbare soner. Dette åpner for scenarioer som vektorkart ikke kan håndtere: interaktive plantegninger, setekart, byggetegninger, ruter og byplaner.

Teknisk sett tar du et bilde av en bygningsplan, sporer rom med «Tegn region»-verktøyet, legger til etiketter, og du får en interaktiv plan der et klikk på et rom viser informasjon om det. Kunder i event- og eiendomsbransjen vil sette pris på dette.

Praktisk veiledning: installasjon og opprettelse av ditt første kart

Å installere MapSVG er ikke forskjellig fra noe annet WordPress-plugin. Forskjellen ligger i prosessen med å lage kart: du trenger minst én gjennomgang av menyen for å forstå grensesnittlogikken. Etter det går det som en lek.

Trinn 1. Installere pluginet

Last ned MapSVG fra WordPress.org (gratis Lite-versjon) eller kjøp premium på mapsvg.com. Deretter i WordPress-administrasjonen: Plugins → Legg til ny → Last opp plugin.

Klikk Last opp (1), velg pluginets ZIP-fil (2), og Installer nå (3):

Vent til installasjonen er fullført og aktiver:

Ferdig. Et MapSVG-element vil dukke opp i sidemenyen i administrasjonen; klikk på det.

Trinn 2. Lage et kart fra en ferdig mal

På startskjermen til MapSVG-panelet vil du se alternativer: velg et ferdig kart, lag et Google-kart (etter å ha satt inn en API-nøkkel), bygg et bildekart, last opp din egen SVG, eller last opp en SVG-fil oppå Google Maps. Lenkene Veiledninger og Brukerstøtte øverst i panelet fører til dokumentasjon og support.

Velg Nytt SVG-kart og finn kartet du trenger i nedtrekkslisten. For dette eksempelet bruker vi Kina-kartet, som er delt inn i provinser og helt klart til bruk.

På neste skjermbilde fyller du inn karttittelen. Her kan du også konfigurere størrelse, responsivitet (aktivert som standard), verktøytips og popup-vinduer. Regionene er allerede klikkbare, og kartet er klart for tilpasning.

Trinn 3. Konfigurere farger

Gå til Meny → Farger. Fargepaletten lar deg angi farger for regioner, bakgrunn, omriss og tilstander (hover, aktiv). Det er ingen begrensninger; velg hvilke som helst nyanser.

Når du har satt fargene, klikker du Lagre Ctrl + S:

Kartet fargelegges umiddelbart i forhåndsvisningsvinduet. Noen få klikk, så er fargeskjemaet ferdig.

Trinn 4. Legge til verktøytips

Lag en mal for verktøytips. Gå til Meny → Maler → Regionverktøytips. Handlebars-malredigereren støtter {{title}}-taggen, som viser regionnavnet. Grunnleggende mal:

1
Region: <strong>{{title}}</strong>

Klikk Lagre Ctrl + S. Aktiver deretter verktøytips: Meny → Innstillinger → Verktøytips.

Når du nå holder musepekeren over en region, vises et verktøytips med navnet. Dette er grunnscenarioet. For å legge til bilder, priser og andre data i verktøytipset, trenger du egendefinerte felt.

Trinn 5. Egendefinerte felt via databaseobjekter

MapSVG lar deg legge til egendefinerte felt for regioner. Felttyper inkluderer tekst, tekstområde, avkrysningsboks, bilder og andre. La oss opprette et bildefelt.

Gå til Meny → Regioner og klikk Rediger felt:

Klikk på Bilde-knappen for å legge til et felt av typen bilde, og deretter Lagre felt:

Ikke glem å klikke Lagre Ctrl + S. Bytt deretter til Liste-fanen:

Aktiver modusen Rediger regioner og klikk på ønsket region (for eksempel Nei Mongol). Et nytt Bilder-felt vil dukke opp til høyre. Klikk Bla gjennom:

Legg til bilder via WordPress' mediebibliotek og klikk Velg bilder:

Systemet returnerer deg til redigeringsskjermen for regionen. Klikk OK (1), deretter Lagre Ctrl + S (2), og bytt tilbake til Forhåndsvisning-modus (3):

Bildene er lagt til, men de vil ikke vises i verktøytipset ennå; du må oppdatere malen. Gå til Meny → Maler → Regionverktøytips og erstatt koden:

1
Region: <strong>{{title}}</strong><br />
2
First image:<br />
3
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />
4
All images:<br />
5
{{#each images}}
6
    <img src="{{thumbnail}}" width="40px" />
7
{{/each}}

Lagre malen. Når du nå holder musepekeren over Nei Mongol, viser verktøytipset de opplastede bildene:

Steg 6. Publisere kartet på nettstedet ditt

Lagre alle endringer. Gå til Sider → Legg til ny, klikk på MapSVG-knappen over redigeringsprogrammet:

Velg det opprettede kartet fra listen, så setter plugin-en inn kortkoden [mapsvg id="17" title="China"]. Publiser siden og sjekk resultatet på forsiden:

Kartet er fullt responsivt; på mobile enheter fungerer regioner og verktøytips uten å miste funksjonalitet. Kortkoden kan settes inn i ethvert innlegg, enhver side eller widget, og kartet vil lastes inn korrekt.

⁉️🤔 Ofte stilte spørsmål

Trenger jeg en Google Maps API-nøkkel for at MapSVG skal fungere?

Bare hvis du planlegger å bruke Google Maps-laget. For å jobbe med ferdige SVG-kart fra biblioteket og dine egne SVG-filer kreves ingen nøkkel. Hvis du trenger Google Maps, henter du en API-nøkkel fra Google Cloud Console og legger den inn i plugin-innstillingene; prosessen tar et par minutter.

Kan jeg laste opp min egen SVG-fil?

Ja. Tegn et kart i Inkscape eller Adobe Illustrator, lagre som SVG, last opp til MapSVG. Plugin-en vil automatisk gjøre vektorformer om til klikkbare regioner. Hvis kartet ikke er geo-kalibrert, vil ikke markører basert på adresse fungere; du må plassere dem manuelt.

Hva er forskjellen mellom betalt og gratis versjon?

Den gratis Lite-versjonen gir deg ubegrensede kart og markører, verktøytips, popover-vinduer og egendefinerte felt. Betalte nivåer legger til funksjoner gradvis: Starter ($49/år) legger til en filtrerbar katalog og egendefinerte maler; Plus ($99/år) legger til Google Sheets-integrasjon, ACF og Metabox; Pro ($199/år) legger til markørklynger og frontend-redigering; Elite ($299/år) legger til REST API og MySQL-datakilder. Livstidslisenser er også tilgjengelige, fra $99 til $599.

Er plugin-en egnet for ikke-kodere?

Et grunnleggende kart med regioner og verktøytips kan definitivt lages uten kode; grensesnittet er visuelt. Men når du trenger egendefinerte verktøytipsmaler (Handlebars) eller styling (CSS), vil minimal HTML-forståelse hjelpe. Dokumentasjonen på mapsvg.com/docs er skrevet med eksempler, og support svarer raskt.

Senker kartene farten på nettstedet?

Nei. Et SVG-kart er en vektor som veier kilobyte, ikke megabyte. Renderingen skjer via JavaScript på klientsiden. Ved et stort antall markører (hundrevis eller tusenvis) anbefaler vi å aktivere klyngedannelse, som er tilgjengelig fra Pro-nivået.

Hva med support og oppdateringer?

Plugin-en oppdateres flere ganger i måneden; endringsloggen på WordPress.org viser at utvikleren aktivt fikser feil og legger til funksjoner. Support er tilgjengelig via en innebygd chat direkte fra adminpanelet (etter aktivering). Brukere bemerker i anmeldelser at svarene er raske, men på grunn av tidssoneforskjeller kan et svar ta flere timer.

Er MapSVG verdt å kjøpe: endelig vurdering

MapSVG er et spesialisert verktøy som rager høyt over standard Google Maps-plugins når du trenger ekte interaktivitet: klikkbare regioner, filtrerbare kataloger og egendefinerte verktøytips. Hvis oppgaven din er «sett inn et veibeskrivelseskart», er plugin-en overkill. Hvis oppgaven din er et eiendomskart, butikkfinner, interaktiv regional statistikk eller sitteplanskart, er MapSVG et av de beste alternativene i WordPress-markedet.

Den gratis Lite-versjonen dekker scenarioer der andre plugins allerede tar betalt: ubegrensede kart og markører, egendefinerte felt, verktøytips og popover-vinduer. Dette er sjelden raushet for en freemium-modell; du kan starte et prosjekt uten budsjett og kjøpe en plan når du trenger filtre, en katalog eller Google Sheets-integrasjon.

Vår erfaring: etter én kveld med dokumentasjonen var et Kina-kart med verktøytips og bilder klart. Ja, grensesnittet er ikke intuitivt ved første øyekast (mange alternativer og menyer), men læringskurven er kort. De innebygde CSS/JS/Handlebars-redigeringsprogrammene er en gave for utviklere: ingen grunn til å grave i temafiler.

Hvis du ser etter en WordPress kart-plugin og ikke vil støte på begrensninger i gratisversjonen i løpet av en måned, start med MapSVG Lite på WordPress.org. Og hvis du trenger et alternativ, sjekk ut vår oversikt over WordPress kart-plugins, der vi sammenlignet et dusin alternativer for ulike bruksområder.