Hvordan lage et interaktivt kart i WordPress

Selv om digital tilstedeværelse har blitt et must for de fleste virksomheter, sier det seg selv at et kart over din fysiske plassering fortsatt er mer enn nyttig. For å få det beste ut av det, kan du til og med style Google-kartet slik at det passer til nettstedets generelle design. Med et interaktivt kart går du imidlertid ett skritt videre: du gir brukerne større frihet til å oppdage sine egne måter å nå deg på og planlegge turene når det passer dem. For ikke å nevne at interaksjon gir en mer tilfredsstillende brukeropplevelse, og trekker besøkende til lengre brukerøkter. I denne artikkelen vil vi vise deg to måter å legge til et interaktivt kart på WordPress-nettstedet ditt – ved å bruke Google My Maps og ved å bruke en spesialisert plugin.

Hvordan legge til et interaktivt kart i WordPress ved hjelp av Google My Maps

Den enkleste måten å installere et interaktivt kart på er å bruke Googles My Maps-tjeneste. Det første du må gjøre er å gå til Google My Maps og klikk på +Lag et nytt kart.

Dette tar deg til kartredigereren. Ved å bruke menyen øverst kan du legge til ruter, markører, linjer, veibeskrivelser og måle avstander. Hvert kart kan ha opptil 10 000 linjer, former eller steder. Hoveddelen til venstre lar deg legge til lag (med opptil 2000 linjer, former eller steder per lag), velg en Grunnkart modus mellom ni alternativer, og til slutt gi kartet et navn.

Vi vil navngi kartet vårt «Hvordan nå oss» og legge til en kort beskrivelse, hvoretter vi lagrer endringene.

Deretter setter vi en nål for å markere plasseringen vår. Vi kaller det «Vår plassering» og legger til en kort beskrivelse. Du kan bruke menyen til å endre stilen på pinnen, slik vi har, til en stjerne, eller fargen, noe vi ikke gjorde. Du kan også legge til bilder eller video til posisjonen din.

Deretter vil vi tegne noen linjer fra det lokale bussholdeplassen og togstasjonen, bare for å vise hvordan du kommer dit fra nærmeste offentlige transportholdeplasser, med svart for toget og rødt for bussholdeplassen.

Til slutt må vi bygge den inn på nettsiden vår. For det må vi først gjøre kartet vårt offentlig. Gå inn i delingsmenyen fra hovedkommandopanelet, vi vil sette tilgangskontrollen fra Begrenset til Alle som har linken. Dette gjør kartet offentlig.

Deretter må du få tilgang til innebyggingskoden fra hovedredigeringspanelet. Klikk på tre prikker ved siden av kartnavnet ditt, velg Bygg inn på nettstedet mitt, og kopier HTML-en du får.

For å bygge det inn på nettstedet ditt, hvis du bruker Gutenberg, gå til siden du vil legge kartet til (eller opprette et nytt), klikk ganske enkelt på + tegn for å legge til en blokk, og velg deretter Egendefinert HTML blokk, og lim inn koden i blokkens felt.

Hvis du jobber med Elementor, må du dra Egendefinert HTML widget og lim deretter inn koden i feltet. Hvis du bruker WPBakery Page Builder, må du bruke Rå HTML element og gi det koden du limte inn. For Klassisk editor, bare sørg for at editoren er satt på Tekst og lim inn koden der du vil ha den.

Og kartet ditt er klart, akkurat slik du har konfigurert det.

Hvordan legge til et interaktivt kart i WordPress ved hjelp av en plugin

Du kan også bruke en plugin for å lage et interaktivt kart. Det er mange WordPress-plugins med denne eller lignende funksjonalitet, mange av dem har vi diskutert i vår artikkel om beste Google Maps-plugins. For denne demonstrasjonen skal vi bruke WP Google Maps, men du kan velge hvilken som helst du vil. Når du har installert og aktivert plugin-modulen, finner du plugin-innstillingene på listen over Installerte plugins og finn Kartredigerer å lage et kart.

Når du er der, vil du finne det enkelt redigerbare kartet som plugin-modulen tillater deg. Du må Redigere den.

Du kan endre Kartnavn, som vi har, til hvor vi er. Vi vil også flytte Zoomnivå kontroller ganske mye til høyre, og zoom inn for å gjøre kartet vårt nyttig for folk som søker veibeskrivelse. Vi vil ikke bruke resten av alternativene i forbindelse med denne demonstrasjonen, men vi vil gjøre deg oppmerksom på Bredde styre. Hvis du vil at kartet skal være responsivt, bør du la det stå 100 %.

Deretter vil vi rulle ned til delen Dine markører og slette standardmarkøren. Du kan gjøre det ved å velge det fra menyen og klikke på søppelkasseikonet. Deretter vil vi sette opp vår egen markør sentrert på Bridge Street i Saint Matthews, South Carolina ved å finne plasseringen og høyreklikke på kartet. Til slutt vil vi Lagre begge våre Markør og vår Kart, i den rekkefølgen.

Bla tilbake opp til Lag kartet ditt seksjonen igjen, finner du kortkoden for kartet ditt i Generelle innstillinger fanen. Klikk for å kopiere den til utklippstavlen og bruke den i et innlegg.

Når du har kortkoden klar til å lime inn, åpner du et innlegg eller en side der du ønsker å bygge inn kartet ditt. Vi vil vise deg hvordan du gjør det i et innlegg ved å bruke Gutenberg. Først klikker du på + tegn for å legge til en kortkodeblokk, og lim deretter inn kartkortkoden i blokkens felt.

Og kartet ditt vises i innlegget ditt, slik det er konfigurert.

Legg merke til at WP Google Maps-pluginen har en rekke alternativer vi knapt har berørt i denne demonstrasjonen, som vi oppfordrer deg til å utforske for å tilpasse kartet fullt ut etter dine behov. Det samme, og enda mer, gjelder for Pro-versjonen.

For å konkludere

Hvis du vil fortelle de besøkende hvor du er i den fysiske verden, kan du enkelt gjøre det ved å legge til et interaktivt kart på nettstedet ditt ved å bruke en av metodene vi har demonstrert. Et interaktivt kart lar dem rulle rundt og zoome for å finne den beste ruten for å nå deg, men med bare noen få klikk kan du gjøre det enda enklere ved å peke dem i riktig retning. Hvis du har noen form for et murstein-og-mørtel-sted, hvorfor ikke gjøre det superenkelt for de besøkende å finne det?