Hur man lägger till en interaktiv karta i WordPress

Att lägga till en karta på din WordPress-webbplats är viktigt när du driver ett företag med en fysisk plats eller skapar innehåll om specifika platser.

Det kan verka komplicerat till en början, men vi har hittat några användbara verktyg som gör processen mycket enklare. I den här artikeln visar vi dig två enkla metoder för att lägga till en interaktiv karta på din WordPress-webbplats.

Vi guidar dig genom varje steg, från att välja rätt verktyg till att bädda in kartan på din sida.

När du ska lägga till en interaktiv karta i WordPress

Om du har en fysisk verksamhet, som en butik eller ett café, kan en interaktiv karta hjälpa potentiella besökare att hitta din plats. Detta kan ge dig fler kunder, försäljning och till och med personliga bokningar och tidsbokningar.

Det kan också förbättra användarupplevelsen eftersom besökare kan planera sin resa utan att behöva använda en separat kartapp eller webbplats.

Beroende på din webbplats kan en interaktiv karta till och med ge användbart innehåll. Om du till exempel har en träningsblogg, kan du visa rekommenderade löprundor eller vandringar för dina läsare.

På samma sätt, om du har en familjeblogg, då kan du lyfta fram alla barnvänliga attraktioner där din publik kan ta med sina familjer.

Med det sagt, låt oss se två nybörjarvänliga sätt att lägga till en interaktiv karta i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Metod 1. Lägg till en interaktiv världskarta med en sidbyggare (anpassade sidor med kartor)
• Metod 2. Skapa interaktiva anpassade kartor gratis med Google My Maps

Metod 1. Lägg till en interaktiv världskarta med en sidbyggare (Anpassade sidor med kartor)

Det enklaste sättet att lägga till en enkel interaktiv karta i WordPress är att använda Google Maps och pluginet SeedProd.

Denna avancerade sidbyggarplugin låter dig skapa professionellt utformade sidor utan att behöva skriva en enda rad kod.

Den levereras också med ett färdigt Google Maps-block som du helt enkelt kan dra och släppa på din layout. Besökare kan interagera med din karta med hjälp av zoomknapparna, eller så kan de dra för att utforska andra områden.

SeedProd gör det enkelt att designa fristående sidor med en unik design, så detta är också ett utmärkt val om du vill lägga till en interaktiv karta till en anpassad hemsida eller landningssida.

Det första du behöver göra är att installera och aktivera SeedProd. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering måste du ange en licensnyckel.

Du hittar denna information i ditt konto på SeedProd-webbplatsen. Efter att ha lagt till licensnyckeln klickar du på 'Verifiera nyckel'.

När det är gjort, gå till SeedProd » Landningssidor och klicka på 'Lägg till ny landningssida'.

SeedProd kommer nu att visa alla mallar du kan använda för att skapa vackra landningssidor, försäljningssidor och mer. För att hjälpa dig att hitta rätt mall för din webbplats är SeedProd:s mallar indelade i kategorier som underhållsläge, kommer snart, webbinarium och mer.

För att titta närmare på en design, för muspekaren över mallen. Klicka sedan på förstoringsglaset.

Detta öppnar mallen i en ny flik.

När du hittar en design som du vill använda på din WordPress-webbplats, klickar du helt enkelt på 'Välj den här mallen'.

Du kan nu skriva in ett namn för din landningssida i fältet ‘Sidnamn’. Detta är bara för din referens så du kan använda vad du vill.

SeedProd skapar automatiskt en ‘Sid-URL’ med hjälp av sidnamnet, men du kan ändra denna automatiskt genererade URL.

När du är nöjd med informationen du har angett klickar du på ‘Spara och börja redigera sidan.’ Detta laddar SeedProd-sidbyggargränssnittet.

Den här enkla dra-och-släpp-byggaren visar en liveförhandsgranskning av sidan till höger. Till vänster finns en meny som visar de olika blocken och sektionerna som du kan lägga till på din WordPress-blogg eller webbplats.

SeedProd levereras med över 90 färdiga block som kan hjälpa dig att snabbt skapa en vacker siddesign. Detta inkluderar avancerade block som nedräkningstimer och inbäddningar som en ljudspelare från SoundCloud eller videor från TikTok.

Du kan också använda SeedProd-block som avdelare, kolumner och linjer för att strukturera sidan. Detta kan hjälpa besökare att navigera på sidan och hitta den information de vill ha.

När du hittar ett block som du vill lägga till sidlayouten, dra och släpp det helt enkelt på mallen. När du bygger din landningssida kan du flytta dessa block runt i din layout genom att dra och släppa dem.

För att lägga till en interaktiv karta, hitta helt enkelt Google Maps-blocket i menyn till vänster och dra det till din layout.

Google Maps-blocket visar en standardplats, men du vill vanligtvis ändra detta.

Klicka helt enkelt för att välja Google Maps-blocket och klicka sedan på den lilla kugghjulsikonen som visas i verktygsfältet.

Detta öppnar blockets inställningar i menyn till vänster.

Skriv här en annan adress i fältet 'Plats'.

Blocket kommer nu att uppdateras för att visa denna adress.

Besökare kan manuellt zooma in och ut från denna plats med hjälp av knapparna för zoomnivå '+' och '-' i kartans övre högra hörn. Du kan dock ändra standardzoom genom att dra 'Zoom'-reglaget eller skriva ett exakt nummer i textrutan.

Därefter kanske du vill ändra storlek på blocket med hjälp av skjutreglagen 'Bredd' och 'Höjd'. 'Höjd' visas i pixlar, men 'Bredd' är den totala tillgängliga procentandelen. Till exempel betyder '100' att Google Maps-blocket tar upp 100 % av den tillgängliga bredden.

För att ändra något av dessa värden, dra helt enkelt reglagen eller skriv ett nummer i textrutan. När du gör ändringar uppdateras Google Maps-blocket automatiskt så att du kan prova olika inställningar för att se vad som ser bäst ut.

Om du ställer in bredden till mindre än 100, kanske du vill ändra blockets justering. Du kan till exempel visa den interaktiva kartan i mitten av sidan.

För att göra denna ändring, klicka helt enkelt på de olika knapparna i avsnittet 'Justering'.

Du kan nu fortsätta att arbeta med designen genom att dra nya block till sidlayouten och sedan göra ändringar i menyn till vänster. För mer information, se vår guide om hur man skapar en landningssida i WordPress.

När du är nöjd med hur sidan är inställd, klicka på pilen bredvid knappen 'Spara' och välj sedan 'Publicera'.

Nu, om du besöker din webbplats, kommer du att se den interaktiva kartan i aktion.

Metod 2. Skapa interaktiva anpassade kartor gratis med Google My Maps

Om du vill lägga till en Google-karta med grundläggande interaktioner är SeedProd ett utmärkt val.

Men om du behöver tillhandahålla mer avancerade interaktioner, rekommenderar vi att du använder Google My Maps istället.

Denna kostnadsfria onlinetjänst låter dig anpassa en Google Maps med unika markörer, intressanta platser, köranvisningar och mer. Du kan sedan lägga till den på din webbplats med hjälp av kod, så du behöver inte installera en separat WordPress-plugin.

Steg 1: Skapa en interaktiv karta med Google My Maps

Först måste du besöka webbplatsen Google My Maps och klicka på 'Skapa en ny karta'.

Du kommer nu att se kartredigeraren.

Här kan du välja en basmapp och lägga till intressanta platser, lager och mer.

För att hålla ditt arbete organiserat är det en bra idé att ge lagret ett namn.

För att göra detta, klicka på de tre prickarna bredvid ‘Namnlös lager’ och välj sedan ‘Byt namn på detta lager.’

Du kan nu skriva in det namn du vill använda. Detta är bara för din referens så du kan använda vad du vill.

När det är gjort, klicka på ‘Spara’.

Därefter kan du ändra hur kartan ser ut genom att välja en av de färdiga stilarna. För att se tillgängliga alternativ, klicka på pilen bredvid ‘Bas karta.’

Du kan sedan klicka på någon av miniatyrbilderna för att tillämpa den stilen på kartan.

Steg 2: Lägg till intressanta platser på den interaktiva kartan

Om du bara vill skapa en enkel karta kan du hoppa till steg 4. Du kanske dock vill anpassa kartan genom att lägga till intressanta platser.

När en besökare klickar på någon av dessa punkter öppnas en tooltip som visar platsens namn, plus en beskrivning, foton och videor där det finns tillgängligt.

Det finns några olika sätt att lägga till klickbara intressepunkter, men det enklaste är att skriva adressen i sökfältet och sedan klicka på ikonen 'Sök'.

Google My Maps kommer nu att zooma in på området.

Ibland kan platsen redan vara tillagd som en intressant plats, särskilt om platsen är en stor turistattraktion eller en berömd byggnad. Om så är fallet kan du helt enkelt klicka på platsen och sedan välja ‘Lägg till på kartan’.

Om intressepunkten redan finns, kommer Google My Maps automatiskt att visa viss information om denna plats i ett popup-fönster. Du kanske dock vill anpassa denna standardinformation eller lägga till dina egna foton och videor.

För att göra detta, klicka på 'Redigera'-ikonen, som ser ut som en liten penna.

Du kan nu skriva in titeln och beskrivningen du vill visa för alla som klickar på denna intressanta plats.

När du är nöjd med informationen du angett, klicka på ‘Spara.’

Ett annat alternativ är att lägga till dina egna bilder och videor i popup-fönstret.

Om du till exempel skapar en interaktiv karta för din restaurangwebbplats, kan du lägga till foton av lokalens exteriör för att hjälpa kunder att hitta den.

Du kan till och med använda detta popup-fönster för att få fler kunder. Till exempel, om du lägger till din fotostudio som en intressepunkt, kan du ladda upp din fotoportfölj.

För att lägga till media, klicka helt enkelt på den lilla kameraikonen.

Du kan nu välja en bild eller video i popup-fönstret som visas.

Efter att ha gjort ditt val, klicka på ‘Infoga.’

När du är klar, glöm inte att klicka på 'Spara' för att lagra dina ändringar.

Ibland vill du kanske visa en plats som inte har lagts till på Google Maps. Det kan vara ditt eget kontor, en butikslokal, en helt ny turistattraktion eller mötesplatsen för ditt evenemang eller din konferens.

För att lägga till en markör, klicka på ikonen 'Lägg till en markör' under sökfältet.

Du kan nu klicka på den exakta platsen där du vill skapa en markör.

Detta öppnar ett tomt popup-fönster där du kan skriva in en titel och beskrivning. Du kan också lägga till bilder och videor genom att klicka på den lilla kameraikonen.

När du är nöjd med hur popup-fönstret är inställt, klicka på knappen 'Spara'.

För att skapa fler intressanta platser, följ helt enkelt samma process som beskrivs ovan.

Steg 3: Lägg till reseanvisningar till en interaktiv karta

Du kanske också vill lägga till några vägbeskrivningar, som kommer att visas som en blå linje på kartan.

Den här kartfunktionen kan vara användbar om du vill hjälpa deltagare att hitta ditt evenemang eller en plats som din bar eller pub. Om du driver en reseblogg, kan du till och med rekommendera några sevärdhetsrutter till dina läsare.

Det finns några olika sätt att lägga till vägbeskrivningar, men den enklaste metoden är att klicka på ikonen ‘Lägg till vägbeskrivningar’ under sökfältet.

Detta lägger till ett nytt avsnitt till vänster om skärmen, där du kan skriva in start- och slutadresser du vill använda.

Som standard visar Google Maps köranvisningar, men du kan istället byta till anvisningar för promenader eller cykling. Klicka helt enkelt på texten som visar 'Körning' som standard och välj sedan ikonen för cykling eller promenader.

Ett annat alternativ är att rita en linje på kartan. Detta är användbart om du vill visa en mycket specifik rutt mellan två eller flera platser, snarare än den snabbaste rutten.

För att göra detta, klicka på ikonen 'Rita en linje' under sökfältet. Du kan nu välja om du vill lägga till en rutt för bil, promenad eller cykel.

Klicka sedan på startpunkten och rita en linje genom att flytta musen längs den rutt du vill ta.

När du når destinationen, klickar du helt enkelt för att placera en markör på den platsen. Vid denna tidpunkt kan du sluta rita eller fortsätta att flytta musen för att lägga till fler markörer på rutten.

Steg 4: Publicera den interaktiva kartan i WordPress

När du är nöjd med hur kartan är inställd kan du lägga till den på din webbplats med hjälp av en inbäddad iFrame-kod.

För att börja måste du göra kartan offentlig genom att klicka på knappen 'Dela'. Detta öppnar ett popup-fönster där du kan ange en karttitel och en valfri beskrivning.

När du är nöjd med informationen du angett, klicka på ‘OK.’

Därefter vill du aktivera växlingsknappen 'Vem som helst med den här länken kan visa'. De andra inställningarna är valfria, så du kan bestämma om du vill låta folk söka efter kartan eller visa ditt namn och profilbild.

När du är nöjd med konfigurationen, klicka på ‘Spara på Drive.’

I nästa popup, öppna rullgardinsmenyn under ‘Allmän åtkomst’ och välj ‘Vem som helst med länken’.

Eftersom vi inte vill att andra ska redigera kartan, klicka på rullgardinsmenyn 'Viewer/Editor' och välj 'Viewer'. Klicka slutligen på 'Done'.

Därefter klickar du på ikonen med tre prickar i menyn till vänster.

Välj sedan 'Bädda in på min webbplats'.

Google Maps kommer nu att visa en inbäddningskod som låter dig lägga till kartan på din webbutik, blogg eller webbplats.

Du kan fortsätta och kopiera denna iframe-kod.

Du är nu redo att klistra in koden på din webbplats. I din WordPress-instrumentpanel, gå till inlägget eller sidan där du vill lägga till en interaktiv karta och öppna Gutenberg-redigeraren.

Klicka sedan på '+' -knappen och börja skriva 'HTML' för att hitta det anpassade HTML-blocket. När rätt block visas, klicka för att lägga till det i inlägget eller sidan.

Du kan nu klistra in Google Maps-koden i blocket Anpassad HTML.

När du är redo att publicera, klicka på antingen knappen Uppdatera eller Publicera.

Nu, om du besöker din webbplats, kommer du att se den interaktiva kartan live.

Vill du lära dig mer om att lägga till kartor i WordPress? Kolla in artiklarna nedan:

• Hur man lägger till Google Maps i WordPress (PÅ RÄTT SÄTT)
• Bästa Google Maps-pluginsen för WordPress (de flesta är gratis)
• Hur man bäddar in en Google-karta i kontaktformulär (med kartnål)
• Hur man lägger till Google Maps butikslokalisering i WordPress
• Hur man bäddar in Bing Maps i WordPress (steg för steg)

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till en interaktiv karta i WordPress. Du kanske också vill lära dig hur du lägger till Google Web Stories på din WordPress-webbplats eller läsa vår ultimata guide om att bädda in PDF-filer, kalkylblad och mer i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.