Behöver du en interaktiv karta på din WordPress-sajt, och räcker inte vanliga Google Maps till? En vanlig iframe-karta ger dig varken klickbara områden, tooltips eller en filtrerbar objektskatalog. Och din kund vill ha en karta med adressökning och färgkodade regioner för statistik.

MapSVG är ett av de få WordPress-plugins som hanterar allt detta i ett och samma verktyg. Det används av över 16 000 sajter, och gratisversionen på WordPress.org låter dig testa nästan alla grundfunktioner utan att betala. Här nedan får du en detaljerad genomgång av funktionerna, en praktisk installationsguide och ett ärligt omdöme om vem pluginet passar för och vem som bör leta vidare.

💡 Snabb överblick:

• Ladda en färdig SVG-karta från det inbyggda biblioteket eller ladda upp din egen fil.
• Koppla databasobjekt med anpassade fält till regioner.
• Konfigurera tooltips och popup-fönster via mallredigeraren.
• Lägg vid behov vektorkartan som ett lager ovanpå Google Maps.
• Infoga shortcoden på en sida och kontrollera resultatet.

Vad MapSVG kan göra: en genomgång av nyckelfunktionerna

Pluginet är utvecklat av Roman Stepanov (RomanCode på WordPress.org). Projektet har varit aktivt sedan 2012 och får regelbundna uppdateringar: i juni 2026 är version 8.6.6 aktuell, med flera releaser per månad enligt ändringsloggen. Det spelar roll för ett plugin som arbetar med Google Maps API, eftersom kartor utan regelbundna uppdateringar slutar fungera så fort API-nyckeln ändras.

100+ Färdiga geokalibrerade kartor

Pluginet levereras med ett bibliotek på över 100 geokalibrerade SVG-kartor. Världskartan är redan uppdelad i klickbara länder. Landskartor med indelning i delstater, provinser och regioner finns tillgängliga separat. Det finns också flera specialkartor.

Geokalibrering innebär att varje område på kartan är knutet till verkliga koordinater. Du kan lägga till markörer via adress eller latitud/longitud, och de hamnar exakt på rätt region. Hittar du inte rätt karta i biblioteket? Rita en SVG i Inkscape eller Adobe Illustrator, ladda upp den till MapSVG, så förvandlar pluginet din vektor till en interaktiv karta med klickbara zoner.

Databasobjekt med anpassade fält

Den här funktionen skiljer MapSVG från de flesta WordPress-kartplugins. Du skapar poster (objekt) i pluginets inbyggda databas med valfri uppsättning fält: text, siffror, bilder, kryssrutor, rullgardinslistor. Sedan kopplar du ett objekt till en specifik kartregion.

Exempel: en fastighetsbyrå skapar objekt för bostäder med adress, pris, yta och bilder. Varje objekt kopplas till en region på kartan. En besökare klickar på ett område och ser bostadskortet i ett snyggt popup-fönster, detaljvy eller tooltip. Inget externt plugin behövs för datalagring; allt stannar inom MapSVG.

Katalog med filtrering och sökning

Databasobjekt kan visas inte bara på kartan utan också som en filtrerbar katalog bredvid den. När en användare skriver en sökfråga i sökfältet eller väljer ett värde i ett rullgardinsfilter uppdateras katalogen och kartan synkroniserat. Ett klick på en kartregion filtrerar katalogen, och vice versa.

Premiumversionerna lägger till filter för kategori, postnummer och datum. CSV-import stöds, och från och med Plus-nivån kan data hämtas direkt från Google Sheets (när källan uppdateras, uppdateras kartan automatiskt).

Vektorkarta som lager ovanpå Google Maps

Vanliga Google Maps via iframe erbjuder nästan ingen anpassning. MapSVG löser detta problem radikalt: du lägger ditt eget interaktiva SVG-lager ovanpå Google Maps av valfri typ (satellit, terräng, vägkarta, hybrid). Allt du behöver är en Google Maps API-nyckel.

Vektorlagret är fullt klickbart: zoner, markörer och tooltips fungerar precis som på en vanlig SVG-karta. Resultatet är en karta som ser ut som Google Maps men beter sig som en helt skräddarsydd webbapplikation. Framhävning av landmärken, interaktiva rutter och regioner är allt konfigurerbart.

Inbyggda redigerare för CSS, JavaScript och Handlebars-mallar

För dig som arbetar med kod erbjuder MapSVG tre inbyggda redigerare. CSS-redigeraren låter dig ändra stilar för tooltips, popup-fönster och markörer samtidigt som du ser resultatet i realtid. JavaScript-redigeraren låter dig koppla in dig på kart-händelser (regionklick, hover) och skriva middleware-logik. Handlebars-mallredigeraren ger dig full kontroll över HTML-strukturen för tooltips, popover-fönster och detaljvyer.

I praktiken innebär det att en tooltip-mall med foto, pris och en "Läs mer"-knapp kan byggas på fem minuter. Och via JavaScript kan du till exempel skicka en AJAX-förfrågan vid klick på en region och dynamiskt ladda data.

Kontrollpanel med förhandsvisning i realtid

MapSVG:s gränssnitt är en dedikerad panel inuti WordPress admin. Kartskapandet är en steg-för-steg-process: välj källa, konfigurera regioner, färger, tooltips, publicera. Alla ändringar visas direkt i förhandsvisningsfönstret; du behöver inte spara och ladda om sidan för att se resultatet.

Navigeringen sker via en rullgardinsmeny organiserad i sektioner (Regioner, Färger, Mallar, Inställningar). Gränssnittet kan kännas överväldigande för nybörjare eftersom det finns många alternativ, men efter den första timmen blir logiken tydlig.

Kartor från rasterbilder

MapSVG fungerar inte bara med vektor-SVG:er utan även med vanliga PNG- och JPEG-filer. Inbyggda ritverktyg låter dig rita av områden ovanpå en rasterbild, och de blir klickbara zoner. Det öppnar upp för scenarier som vektorkartor inte klarar av: interaktiva planlösningar, sittplatskartor, ritningar, rutter och stadsplaner.

Tekniskt sett tar du ett foto på en byggnadsplan, ritar av rum med verktyget "Rita region", lägger till etiketter, och du får en interaktiv plan där ett klick på ett rum visar information om det. Kunder inom event- och fastighetsbranschen kommer att uppskatta detta.

Praktisk guide: installation och skapa din första karta

Att installera MapSVG skiljer sig inte från något annat WordPress-plugin. Skillnaden ligger i processen att skapa kartor: du behöver minst en genomgång av menyn för att förstå gränssnittets logik. Efter det flyter det på smidigt.

Steg 1. Installera pluginet

Ladda ner MapSVG från WordPress.org (gratis Lite-version) eller köp premium på mapsvg.com. Gå sedan till WordPress admin: Plugins → Lägg till ny → Ladda upp plugin.

Klicka på Ladda upp (1), välj pluginets ZIP-fil (2) och Installera nu (3):

Vänta tills installationen är klar och aktivera:

Klart. Ett MapSVG-menyalternativ visas i sidofältet i adminpanelen; klicka på det.

Steg 2. Skapa en karta från en färdig mall

På MapSVG-panelens startskärm ser du alternativ: välj en färdig karta, skapa en Google-karta (efter att du har lagt in en API-nyckel), bygg en bildkarta, ladda upp din egen SVG eller ladda upp en SVG-fil ovanpå Google Maps. Länkarna Tutorials och Support högst upp på panelen leder till dokumentation och support.

Välj New SVG Map och hitta kartan du behöver i rullgardinsmenyn. I det här exemplet använder vi Kina-kartan, som är indelad i provinser och helt redo att användas.

På nästa skärm fyller du i kartans titel. Här kan du också konfigurera storlek, responsivitet (aktiverat som standard), tooltips och popup-fönster. Regionerna är redan klickbara och kartan är redo för anpassning.

Steg 3. Konfigurera färger

Gå till Menu → Colors. Färgpaletten låter dig ställa in färger för regioner, bakgrund, linjer och tillstånd (hover, aktiv). Det finns inga begränsningar; välj vilka nyanser som helst.

När du har ställt in färgerna klickar du på Save Ctrl + S:

Kartan får omedelbart nya färger i förhandsgranskningsfönstret. Några klick och färgschemat är klart.

Steg 4. Lägga till tooltips

Skapa en tooltip-mall. Gå till Menu → Templates → Region Tooltip. Handlebars-mallredigeraren stöder taggen {{title}}, som visar regionens namn. Grundmall:

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

Klicka på Spara Ctrl + S. Aktivera sedan tooltips: Meny → Inställningar → Tooltips.

När du nu för muspekaren över en region visas en tooltip med dess namn. Detta är grundscenariot. För att lägga till bilder, priser och annan data i tooltipen behöver du anpassade fält.

Steg 5. Anpassade fält via databasobjekt

MapSVG låter dig lägga till anpassade fält till regioner. Fälttyperna inkluderar text, textarea, kryssruta, bilder med flera. Låt oss skapa ett bildfält.

Gå till Meny → Regioner och klicka på Redigera fält:

Klicka på Bild-knappen för att lägga till ett fält av bildtyp, och sedan Spara fält:

Glöm inte att klicka på Spara Ctrl + S. Växla sedan till fliken Lista:

Aktivera läget Redigera regioner och klicka på önskad region (till exempel Nei Mongol). Ett nytt Bilder-fält visas till höger. Klicka på Bläddra:

Lägg till bilder via WordPress mediebibliotek och klicka på Välj bilder:

Systemet tar dig tillbaka till regionredigeringsskärmen. Klicka på OK (1), sedan Spara Ctrl + S (2), och växla tillbaka till Förhandsgranska-läget (3):

Bilderna är tillagda, men de kommer inte att visas i tooltipen ännu; du måste uppdatera mallen. Gå till Meny → Mallar → Regiontooltip och ersätt 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}}

Spara mallen. När du nu hovrar över Nei Mongol visar tooltipen de uppladdade bilderna:

Steg 6. Publicera kartan på din sajt

Spara alla ändringar. Gå till Sidor → Lägg till ny, klicka på MapSVG-knappen ovanför redigeraren:

Välj den skapade kartan från listan, så infogar pluginet shortcoden [mapsvg id="17" title="China"]. Publicera sidan och kontrollera resultatet på frontend:

Kartan är fullt responsiv; på mobila enheter fungerar regioner och tooltips utan att tappa funktionalitet. Shortcoden kan infogas i vilket inlägg, vilken sida eller widget som helst, och kartan laddas korrekt.

⁉️🤔 Vanliga frågor

Behöver jag en Google Maps API-nyckel för att MapSVG ska fungera?

Bara om du planerar att använda Google Maps-lagret. För att arbeta med färdiga SVG-kartor från biblioteket och dina egna SVG-filer krävs ingen nyckel. Om du behöver Google Maps hämtar du en API-nyckel från Google Cloud Console och anger den i pluginets inställningar; processen tar ett par minuter.

Kan jag ladda upp min egen SVG-fil?

Ja. Rita en karta i Inkscape eller Adobe Illustrator, spara som SVG, ladda upp till MapSVG. Pluginet omvandlar automatiskt vektorformerna till klickbara regioner. Om kartan inte är geo-kalibrerad fungerar inte markörer via adress; du måste placera dem manuellt.

Vad är skillnaden mellan betal- och gratisversionen?

Den kostnadsfria Lite-versionen ger dig obegränsat med kartor och markörer, tooltips, popover-fönster och anpassade fält. Betalnivåerna lägger till funktioner stegvis: Starter ($49/år) lägger till en filtrerbar katalog och anpassade mallar; Plus ($99/år) lägger till Google Sheets-integration, ACF och Metabox; Pro ($199/år) lägger till markörklustring och frontend-redigering; Elite ($299/år) lägger till REST API och MySQL-datakällor. Livstidslicenser finns också, från $99 till $599.

Passar pluginet för icke-kodare?

En grundläggande karta med regioner och tooltips kan definitivt göras utan kod; gränssnittet är visuellt. Men när du behöver anpassade tooltip-mallar (Handlebars) eller styling (CSS) hjälper minimal HTML-förståelse. Dokumentationen på mapsvg.com/docs är skriven med exempel, och supporten svarar snabbt.

Saktar kartorna ner sajten?

Nej. En SVG-karta är vektorbaserad och väger kilobyte, inte megabyte. Renderingen sker via JavaScript på klientsidan. Med ett stort antal markörer (hundratals eller tusentals) rekommenderar vi att aktivera klustring, vilket är tillgängligt från Pro-nivån.

Hur är det med support och uppdateringar?

Pluginet uppdateras flera gånger i månaden; ändringsloggen på WordPress.org visar att utvecklaren aktivt fixar buggar och lägger till funktioner. Support finns via en inbyggd chatt direkt från adminpanelen (efter aktivering). Användare noterar i recensioner att svaren är snabba, men på grund av tidsskillnader kan ett svar ta några timmar.

Är MapSVG värt att köpa: slutgiltigt omdöme

MapSVG är ett specialiserat verktyg som står huvud och axlar över vanliga Google Maps-plugins när du behöver verklig interaktivitet: klickbara regioner, filtrerbara kataloger och anpassade tooltips. Om din uppgift är att "infoga en vägbeskrivningskarta" är pluginet overkill. Om din uppgift är en fastighetskarta, butikssökare, interaktiv regional statistik eller sittplatskarta är MapSVG ett av de bästa alternativen på WordPress-marknaden.

Den kostnadsfria Lite-versionen täcker scenarier där andra plugins redan tar betalt: obegränsat med kartor och markörer, anpassade fält, tooltips och popover-fönster. Detta är sällsynt generositet för en freemium-modell; du kan lansera ett projekt utan budget och köpa en plan när du behöver filter, en katalog eller Google Sheets-integration.

Vår erfarenhet: efter en kväll med dokumentationen var en Kinakarta med tooltips och bilder klar. Ja, gränssnittet är inte intuitivt vid första anblicken (många alternativ och menyer), men inlärningskurvan är kort. De inbyggda CSS/JS/Handlebars-redigerarna är en gudagåva för utvecklare: inget behov av att gräva i temafiler.

Om du letar efter ett WordPress-kartplugin och inte vill slå i gratisversionens begränsningar om en månad, börja med MapSVG Lite på WordPress.org. Och om du behöver ett alternativ, kolla in vår sammanställning av WordPress-kartplugins, där vi jämförde ett dussin alternativ för olika användningsfall.