Hur man skapar en interaktiv karta i WordPress

Även om digital närvaro har blivit ett måste för de flesta företag, säger det sig självt att en karta över din fysiska plats fortfarande är mer än användbar. För att göra det bästa av det kan du till och med styla din Google-karta så att den passar din webbplats övergripande design. Med en interaktiv karta går du dock ett steg längre: du ger dina användare större frihet att upptäcka sina egna sätt att nå dig och planera sina resor när det passar dem. För att inte nämna att interaktion ger en mer tillfredsställande användarupplevelse och lockar dina besökare till längre användarsessioner. I den här artikeln kommer vi att visa dig två sätt att lägga till en interaktiv karta till din WordPress-webbplats – med hjälp av Google My Maps och med hjälp av en specialiserad plugin.

Hur man lägger till en interaktiv karta i WordPress med hjälp av Google My Maps

Det enklaste sättet att installera en interaktiv karta är att använda Googles tjänst Mina kartor. Det första du behöver göra är att gå till Google Mina kartor och klicka på +Skapa en ny karta.

Detta tar dig till kartredigeraren. Med hjälp av menyn längst upp kan du lägga till rutter, markörer, linjer, vägbeskrivningar och mäta avstånd. Varje karta kan ha upp till 10 000 linjer, former eller platser. Huvudsektionen till vänster låter dig lägga till lager (med upp till 2 000 linjer, former eller platser per lager), välj en Grundkarta läge mellan nio alternativ och, slutligen, namnge din karta.

Vi kommer att namnge vår karta ”Hur du når oss” och lägga till en kort beskrivning, varefter vi sparar våra ändringar.

Därefter kommer vi att sticka en nål för att markera vår plats. Vi kommer att kalla det ”Vår plats” och lägga till en kort beskrivning. Du kan använda menyn för att ändra stilen på nålen, som vi har, till en stjärna, eller färgen, vilket vi inte gjorde. Du kan också lägga till bilder eller video till din plats.

Därefter kommer vi att rita några linjer från den lokala busshållplatsen och tågstationen, bara för att visa hur man tar sig dit från närmaste hållplatser för kollektivtrafiken, med svart för tåget och rött för busshållplatsen.

Slutligen måste vi bädda in den på vår hemsida. För det måste vi först göra vår karta offentlig. Gå in i delningsmenyn från huvudkommandopanelen, vi kommer att ställa in åtkomstkontrollen från Begränsad till Alla som har länken. Detta gör kartan offentlig.

Därefter måste du komma åt inbäddningskoden från huvudredigeringspanelen. Klicka på tre prickar bredvid ditt kartnamn, välj Bädda in på min hemsida, och kopiera HTML-koden du får.

För att bädda in den på din webbplats, om du använder Gutenberg, gå till sidan du vill lägga till kartan på (eller skapa en ny), klicka bara på + tecken för att lägga till ett block och välj sedan Anpassad HTML blockera och klistra in koden i blockets fält.

Om du arbetar med Elementormåste du dra Anpassad HTML widget och klistra sedan in koden i dess fält. Om du använder WPBakery Page Builder, måste du använda Rå HTML element och förse det med koden du klistrade in. För Klassisk editor, se bara till att din editor är inställd på Text fliken och klistra helt enkelt in koden där du vill ha den.

Och din karta är klar, precis som du har konfigurerat den.

Hur man lägger till en interaktiv karta i WordPress med hjälp av en plugin

Du kan också använda ett plugin för att skapa en interaktiv karta. Det finns gott om WordPress-plugins med denna eller liknande funktionalitet, varav många har vi diskuterat i vår artikel om bästa Google Maps-plugins. För den här demonstrationen kommer vi att använda WP Google Maps, men du kan välja vilken som helst du vill. När du har installerat och aktiverat plugin-programmet hittar du plugin-inställningarna på din lista över Installerade plugins och hitta Kartredigerare för att skapa en karta.

Väl där hittar du den enda redigerbara kartan som pluginet tillåter dig. Du kommer behöva Redigera Det.

Du kan ändra Kartans namn, som vi har, till där vi är. Vi kommer också att flytta Zoomnivå kontrollera en hel del åt höger, zooma in för att göra vår karta användbar för människor som söker vägbeskrivningar. Vi kommer inte att använda resten av alternativen för denna demonstration, men vi kommer att uppmärksamma dig på Bredd kontrollera. Om du vill att din karta ska vara responsiv bör du lämna den på 100 %.

Därefter rullar vi ner till avsnittet Dina markörer och tar bort standardmarkören. Du kan göra det genom att välja det från menyn och klicka på soptunnelikonen. Sedan kommer vi att sätta upp vår egen markör centrerad på Bridge Street i Saint Matthews, South Carolina genom att hitta platsen och högerklicka på kartan. Slutligen kommer vi att göra det Spara båda våra Markör och vår Karta, i den ordningen.

Rulla tillbaka upp till Skapa din karta sektionen igen, hittar du kortkoden för din karta i Allmänna Inställningar flik. Klicka för att kopiera den till ditt urklipp och använda den i ett inlägg.

När du har din kortkod redo att klistra in, öppna ett inlägg eller sida där du vill bädda in din karta. Vi kommer att visa dig hur du gör det i ett inlägg med Gutenberg. Klicka först på + tecken för att lägga till ett kortkodsblock och klistra sedan in din kortkortkod i blockets fält.

Och din karta kommer att visas i ditt inlägg, som konfigurerat.

Observera att WP Google Maps-plugin har en mängd alternativ som vi knappt har berört i den här demonstrationen, som vi uppmuntrar dig att utforska för att helt kunna anpassa din karta efter dina behov. Detsamma, och ännu mer, gäller för Pro-versionen.

Sammanfattningsvis

Om du vill låta dina besökare veta var du är i den fysiska världen kan du göra det enkelt genom att lägga till en interaktiv karta på din webbplats med någon av metoderna vi har visat. En interaktiv karta låter dem rulla runt och zooma för att hitta den bästa rutten för att nå dig, men med bara några klick kan du göra det ännu enklare genom att peka dem i rätt riktning. Om du har någon form av en tegel-och-murbruksplats, varför inte göra det superenkelt för dina besökare att hitta det?