Hur man lägger till Google Maps i WordPress-webbplatsen (det enklaste sättet)

Att lägga till en Google-karta på din webbplats gör det inte bara enkelt för besökare att hitta din företagsplats utan ger också en touch av professionalism och funktionalitet. 

Men hur man lägger till Google Maps i WordPress-webbplatsen? 🤔

Oroa dig inte! Vi visar den enklaste metoden:

• Använda ett WordPress-plugin (ElementsKit)

Du kanske frågar, varför ElementsKit? 

Tja, den erbjuder en Google Map-widget som du bara kan infoga dra och släpp. Du får också enorma anpassningsmöjligheter för att anpassa din Google Map så att den ser ut precis som du vill ha den. Så du behöver inte vara en kodningsvetare för att få det att hända!

Låt oss dyka in! 🥳

Vad är Google Maps?

Google Maps är en webbkarttjänst utvecklad av Google för att visa exakta platser och vägbeskrivningar för vilken adress som helst. 🗺️

Google Maps är en webbkarttjänst utvecklad av Google för att visa exakta platser och vägbeskrivningar för vilken adress som helst. Du kan se satellitbilder, gatukartor och 360° panoramautsikt av gator. Dessutom erbjuder Google Maps också trafikförhållanden i realtid och bästa ruttplanering för resor till fots, bil, cykel eller kollektivtrafik. 🛣️🚦

Hur fungerar då Google Maps? Nåväl, Google Maps fungerar huvudsakligen med en komplett kombination av satellit- och markbilder. Samtidigt samlar den in användarfeedback kontinuerligt för att fortsätta med en valideringsprocess och håller sig uppdaterad med den ständiga förändringen i realtidsförhållanden. ⏳

Hur man lägger till Google Maps i WordPress-webbplatsen i 5 steg 

Det enklaste sättet att integrera Google Maps i WordPress är att använda ett WordPress-plugin. Manuell integration är också möjlig, men det är svårt att få alla faciliteter och anpassningsmöjligheter utan ett plugin.

För att lägga till Google Maps till din WordPress-webbplats, ElemenetKit WordPress-plugin är det bästa valet. Det är ett ultimat allt-i-ett Elementor-tillägg för WordPress-webbplatsen som redan nått 1M+ aktiv installation milstolpe. 

Du kommer att få 85+ anpassade Elementor-widgets tillsammans med Google Map. Med flera typer av kartstilar hittar du många anpassningsalternativ som definitivt kommer att passa dina preferenser, webbplatstyp, såväl som användarnas behov.

Låt oss utforska det enkla 5 steg om hur du lägger till Google Maps på WordPress-webbplatsen med hjälp av ElementsKit-plugin! 🙌 

✨✨ Krav 
✅ Elementor – Ladda ner Elementor
✅ ElementsKit Lite – Ladda ner ElementsKit Lite
✅ ElementsKit Pro – Skaffa ElementsKit Pro
✅ Google Map API – Skaffa Google Map API

Steg 1: Installera ElementsKit Plugin 

Installationsprocessen för ElementsKit liknar alla andra plugin-installationer i WordPress. Du kan installera och aktivera det direkt eller ladda upp pluginets zip-fil, sedan installera och aktivera licensen. För att installera ElementsKit, 

• Gå till din WordPress-instrumentpanel 
• Klicka på Plugins ➔ "Lägg till nytt" 
• Ladda ner ElementsKit WordPress-plugin Zip-fil och ladda upp filen 
• Eller sök efter Tillägget ElemenetsKit  i sökrutan
• Klicka sedan på "Installera"
• När du har installerat, klicka på "Aktivera"

🎯 Eftersom Google Map-funktionen är en proffs widget av ElementsKit måste du köpa ett premiumpaket och aktivera licensen. 

👉 Här är dokumentationsguiden om hur man köper och aktiverar ElementsKit Pro-licensen. 

Steg 2: Skapa en Google Map API-nyckel

Nu måste du generera Google Map API-nyckeln för att ansluta till din WordPress-webbplats. Google Maps API (Application Programming Interface) är en unik kod ges av Google för att integrera och använda Google Maps-funktionalitet i dina egna webbplatser eller andra applikationer. 

• Navigera till Konfigurera i Cloud Console
• Klicka på "Skapa nytt projekt"

• Skriv din Projektnamn och plats 
• Klicka på "SKAPA"

• Den omdirigeras till hamburgermenyn
• Välj "API:er och tjänster" alternativ
• Klicka på "AKTIVERA APIS OCH TJÄNSTER"

• Sök Karta i sökrutan
• Eller klicka på  "Maps JavaScript API"

• Om du inte har premiumplanerna måste du göra det konfigurera ditt konto med nödvändig information (land, kortuppgifter, faktureringsadress, etc)

• Aktivera sedan Maps JavaScript API 
• Gå nu till Google Maps Platform ➔ Sida med inloggningsuppgifter
• Välj en projekt eller så kan du också skapa ett nytt projekt härifrån
• Klicka på "Skapa inloggningsuppgifter", och det kommer att generera en ny API-nyckel till dig

• Klicka sedan Skapa autentiseringsuppgifter ➔ API-nyckel
• Du kan se den nyskapade API-nyckeln för Google Maps listad på sidan Inloggningsuppgifter under API-nycklar
• Kopiera API-nyckeln härifrån
• Klicka på Stäng

❗❗Kom ihåg att begränsa API:et nyckel innan du använder den på din WordPress-webbplats❗❗

Steg 3: Anslut Google Map API Key med ElementsKit 

Nu måste du anslut den nyskapade Google Map API-nyckeln till din WordPress-webbplats. För att göra det måste du klistra in API-nyckeln i Google Map-delen av ElementsKit. 

• Gå till din WordPress-instrumentpanel 
• Klicka på "ElementsKit" 
• Gå till "WIDGETS" alternativ
• Scrolla ner, du kan se Google Map-widgeten  
• Slå på "Google karta" widget 
• Klicka på "Spara ändringar"

• Navigera  "ElementsKit" ➔ "Användarinställningar"
• Scrolla ner och klicka på "Google karta" alternativ 
• Klistra in API-nyckeln på inmatningsfältet 
• Klicka på "Spara ändringar"

Steg 4: Dra och släpp Google Map-widgeten på sidan/inlägget

Nu är det dags att se hur du lägger till Google Maps på WordPress-webbplatsen genom att bara dra och släppa:

• Skapa en ny sida/inlägg eller öppna en befintlig sida/inlägg 
• Klicka på "Redigera med Elemetor" 
• Sök efter "Google karta" widget för Elemenetkit 
• Dra och släpp widgeten inuti blocket där du vill visa kartan

🟢 Obs! Du kan lägga till flera kartor och anpassa dem individuellt med samma widget. Allt du behöver göra är att välja ett Elementor-block och sedan dra och släppa Google Map-widgeten. 🟢

Steg 5: Anpassa Google Map Settings 

Nu är det sista steget att anpassa Google Maps enligt dina preferenser. ElementsKit erbjuder massor av anpassningsalternativ inklusive innehåll, stil och avancerade inställningar för layout, rörelseeffekter, lyhördhet, anpassad CSS, etc. 

Låt oss se hur du kan anpassa Google Maps med hjälp av anpassningsalternativen för ElementsKit på din WordPress-webbplats. 

Innehållsanpassning 

I det här avsnittet kan du välja karttyp och adresstyp och ställa in anpassad latitud och longitud för att lägga till adressen du vill visa på din webbplats. Det finns också anpassningsalternativ för kartmarkörer, kontroller och teman. 

🌎 Karttyp 

ElementsKit erbjuder mångsidiga kartplattformar från denna enda widget. Du kan välja karttyp från rullgardinsmenyn. 

• Klicka på Inställningar ➔ Välj karttyp  

Här kan du få 7 typer av Google maps, Till exempel:

1️⃣ Grundläggande: Med den grundläggande Google Map-funktionaliteten kan din webbplatsanvändare söka efter platser, visa kartor och få vägbeskrivningar till olika destinationer. 

Om du är nybörjare och vill lägga till en enkel Google Map till din WordPress-webbplats med en markör, välj den grundläggande karttypen. 

2️⃣ Multipelmarkör: Att använda flera Google Maps är idealiskt för dig om du planerar resor eller markerar olika platser. Dina webbplatsbesökare kan markera och märka flera punkter av intresse på en enda karta. 

3️⃣ Statisk: Med hjälp av funktionen för statiska kartor i ElementsKit kan du ge dina användare en statisk bild av en karta. Den här typen av karta kan bäddas in i dina WordPress-webbplatser om du vill dela offlinevisning. 

4️⃣ Polyline:  du använder Google Maps av Polyline-typ på din WordPress-webbplats för att tillåta användare att skapa och visa linjer på kartan för att se rutter, gränser eller specifika intresseområden.

5️⃣ Överdrivet: ElementsKits Google Maps-widget stöder också överlagringsintegreringsfunktionen. Med den här typen av karta kan du visa överlägget ytterligare data till exempel väderinformation, trafikförhållanden eller anpassade lager på kartan för förbättrad visualisering. 

6️⃣ Med rutter: När du använder med rutter-kartan för ElementsKit kan dina webbplatsbesökare ange sina start- och målpunkter för att få detaljerade vägbeskrivningar. Dessutom kan de se beräknad restid och trafikuppdateringar i realtid. 

Det hjälper dig att ta reda på deras avstånd från din plats, eller mer lämpligt när du måste lägga till flera kontors-/filialadresser till din webbplats.

7️⃣ Panorama: Du kan också visa panoramavyn med hjälp av Google Map-widgeten i ElementsKit. Panoramavyer, även känd som Street View ger användarna en 360-graders virtuell rundtur på olika platser. Det kommer att tillåta webbplatsbesökarna att utforska platser som om de vore fysiskt närvarande.

👉👉 För varje typ av kartanpassning i detalj kan du kolla in den här dokumentationen – Google-karta på WordPress-webbplatsen.

📌 Adresstyp 

För varje typ kan du välja Adresstyp som adress genom skriva platsnamnet direkt eller ställa in latitud och longitud för respektive adress. 

Men latitud och longitud är det geografiska koordinater för att representera en specifik plats på jordens yta. 

Latitud är mätningen av en punkts avstånd norr eller söder av ekvatorn. Å andra sidan definierar longitud mätningen av en punkts avstånd öster eller väster av Prime Meridian.

Få latitud och longitud: 

• Gå till https://www.google.com/maps/
• Sök på namn av din plats
• Högerklicka på punkten i kartan
• Du kan se värden för latitud (vänster) och longitud (höger)
• Nu kopiera latitud och longitud
• Nästa, klistra dem i sina inmatningsfält

🔖 Markörinställningar 

Här kan du anpassa alternativen för att markera platsen med hjälp av titel, innehåll, ikon etc. 

• Lägg till en Google map titel för att visa namnet medan någon söker efter din plats
• Skriv innehåll med 1-2 rader till beskriv adressen när du håller muspekaren över kartan 
• Aktivera reglaget för att lägga till en anpassad markörikon
• Ladda upp markörikon, du kan använda din företagslogotyp eller andra ikoner för att beskriva din identitet 
• Uppsättning anpassad bredd och höjd för markörikonen 

🟢 För flera markörer av typen Google Map kan du ladda upp och anpassa flera ikoner för varje plats. 🟢

🎛️ Kontroller

Du kan styra zoomnivån, gatuvyn, karttyp, kartrullning, etc från den här inställningen. 

• Kontrollzoomnivå: Ange valfritt nummer för att definiera zoomningsnivån.
• Aktivera Street View Control: Aktivera för att visa kartan med Street View.
• Aktivera karttypkontroll: Aktivera för att låta användaren styra karttyp, t.ex. färdkarta, satellit, etc.
• Aktivera zoomkontroll: Slå på för att lägga till en zoomkontrollikon för att zooma in (+) och zooma ut (-) på kartan.
• Aktivera fullskärmskontroll: Om du aktiverar det här alternativet kan användaren se kartan i helskärmsläge.
• Aktivera rullhjulszoom: Aktivering av rullningskontrollhjulet ökar eller minskar zoomfaktorn med 10% för varje klick, uppåt eller nedåt.

🎨 Teman

Du kan anpassa Google Maps temakälla och stilar. Dessutom, om du kan lägga till ett anpassat tema, är det möjligt i ElementsKit Google Map-widgeten. 

✨ Googles standardtemakälla 

• Klicka på tema ➔ Välj källtyp: Google Standard  
• Välj standardtemastilar från rullgardinsmenyn:
  • Standard, Sliver, Retro, Dark, Night och Aubergine

✨ Källa för Snazzy Maps-tema 

• Om du vill lägga till olika färgscheman är Snazzy Map för din webbplats. 
• Klicka på tema ➔ Välj källtyp: Snazzy Maps
• Välj stilar från rullgardinsmenyn:
  • Standard, Enkel, Färgrik, Komplex, Mörk, Gråskala, Monokrom, Inga etiketter och Tvåfärgad 

✨ Anpassat tema

• Du kan också lägga till ett anpassat tema enligt dina preferenser och behov. 
• Välj den temakälla ➔ Anpassad
• Lägg till en anpassad temastil i det angivna fältet 
• Klicka på "Klicka här" för att få JSON-stilkoden för din valda stil 

Stilanpassning

Du får full flexibilitet att ställa in anpassad höjd, bredd och kartanpassning baserat på webbsidans design. 

➡️ Höjd: Ställ in anpassad höjd för kartan

➡️ Bredd: Justera bredden enligt dina önskemål

➡️ Inriktning: Ställ in justeringen av Google-kartan till vänster, höger eller mitten

Avancerad anpassning 

Du kan styra alla stilar för kartlayout och andra funktioner och anpassa dem från de avancerade inställningarna i ElementsKit Google Map-widgeten. 

⏺️ Ställ in anpassade värden för hela layouten bredd, marginal, stoppning, position och z-index 

⏺️ Set rörelseeffekter för inmatningsfälten (t.ex. zooma in, zooma ut, tona in, tona ut, etc)

⏺️ Välj layout bakgrundstyp och färg

⏺️ Anpassa kanttyp, radie, mask och enhetsrespons (dator, flik, mobil)

⏺️ Infoga attribut och anpassad CSS för ytterligare funktioner 

5 fördelar med att infoga Google Maps på WordPress-webbplatsen 

Att lägga till Google Maps på din webbplats erbjuder många fördelar. Här är 5 stora fördelar för att integrera Google Maps på din WordPress-webbplats:

1. Ökar verksamhetens synlighet 

När några besökare landar på din webbplats hjälper Google Maps dem att se din plats och ge en tydlig idé var ditt företag är beläget. 

Eftersom den här funktionen är särskilt användbar för företag med fysiska skyltfönster eller kontor. Så om du har flera grenar kan du visa upp dem på en enda karta. 

Det hjälper dina kunder att ta reda på nya och närliggande kontor. De kan helt enkelt klicka på markörerna för att få adress och vägbeskrivning till varje plats. 

Som ett resultat kan du öka din företagets synlighet för potentiella kunder på din WordPress-webbplats. 

2. Ger exakta anvisningar 

En av de främsta fördelarna med att införliva Google Maps i din WordPress-webbplats är att ge exakta anvisningar till ditt företag. Besökare kan ange sin nuvarande plats och få steg-för-steg-anvisningar till din plats. 

Den här funktionen är mycket praktisk för kunder som inte är bekanta med området eller förlitar sig på kollektivtrafik. Exakta vägbeskrivningar hjälper till att säkerställa att potentiella kunder enkelt kan nå ditt företag utan krångel eller förvirring. 

3. Visa upp lokal SEO

Lokal sökmotoroptimering (SEO) är avgörande för företag som riktar sig till ett specifikt geografiskt område. Genom att integrera Google Maps i din WordPress-webbplats kan du visa upp ditt företags plats i sökresultaten. 

Enligt nyare studier har ca 46% av alla sökningar har lokal avsikt. Det indikerar att internetanvändare letar efter sina närmaste företag, tjänster eller produkter.

Så om du lägger till en Google-karta ökar dina chanser att synas i lokalt paket eller kartpaket. Det är den del av sökresultaten som visar en karta med lokala företag relaterade till sökfrågan. 

Som ett resultat kan du utnyttja denna stora lokala sökpublik och förbättra dina chanser att attrahera lokala kunder. 

4. Underlättar evenemangsplanering 

Att integrera Google Maps i din WordPress-webbplats kan förenkla evenemangsplaneringsprocess för både dig och dina deltagare för affärsevenemang eller sammankomster. Du kan bädda in en karta på din evenemangssida för att tillhandahålla exakt plats och vägbeskrivningar till lokalen. 

Det här kommer att spara dina besökare tid och ansträngning i att söka efter lokalen separat. Dessutom kan du inkludera markörer för närliggande hållplatser för kollektivtrafiken, parkeringsområden eller boenden, för att göra det ännu enklare för deltagarna att planera sitt besök. 

5. Förbättra tillit, trovärdighet och användarupplevelse 

Sist men inte minst, när du har en adress på Google Maps hjälper det till att bygga förtroende bland besökarna. Det visar transparens och ger kunderna visuella bevis på din existens. 

Dessutom, när besökare enkelt kan se din plats är det mer sannolikt att de litar på ditt företag, särskilt om de kan hitta positiva recensioner och betyg kopplade till din plats.

Det kan också hjälpa att lägga till en Google-karta på din WordPress-webbplats öka varumärket på ett trovärdigt sätt samt jämna ut användarupplevelsen genom korrekt riktning av din affärsplats. Det kommer att minska behovet för användare att växla mellan plattformar för att hitta vägbeskrivningar eller söka efter ditt företag på externa karttjänster. 

Genom att behålla besökare på din webbplats kan du tillhandahålla en sömlös upplevelse, öka chanserna till omvandlingar och kundnöjdhet.

🔔 Folk läser också – Skapa en nyhetsticker i WordPress: 3 enkla steg

5 bästa metoder för att använda Google Maps i WordPress

Här är 5 bästa praxis för att använda Google Maps på WordPress-webbplatser för att förbättra användarupplevelsen och ligga steget före SEO-spel. 

✔️ Säkerställ rätt placering av kartan

Lämplig kartplacering är avgörande för både användbarhet och sökmotoroptimering (SEO). Du kan till exempel visa din platskarta på kontaktsida eller sidfoten. 

Det finns inga strikta regler för kartplacering på din webbplats, bara du bör placera din karta på en plats där den finns lätt för besökarna att hitta och använda.  

✔️ Optimera kartans laddningstid och prestanda

Se till att du har optimerade laddningstiden av kartan. Eftersom en långsam laddningskarta kan vara frustrerande för besökare och kan också skada din SEO. 

Du kan använda en lätt Google Maps plugin med alla anpassningsalternativ som ElementsKit. Om du använder en alternativ metod istället för en plugin, förminska och komprimera JavaScript och CSS filer innan du publicerar Google Map på din webbplats. 

✔️ Säkerställ responsiv design för mobila enheter

Enhetens lyhördhet är ett måste. Se till att kartan automatiskt anpassar sin storlek och layout till passar alla skärmstorlekar t.ex. dator, flik eller mobiltelefon. 

Detta är viktigt för att säkerställa att besökarna har en bra erfarenhet visa din karta inte bara på PC eller stora skärmar utan även på mobila enheter.

✔️ Säkerställa efterlevnad av Google Maps API-villkor

Google Maps har en uppsättning villkor att du måste gå med på och följa dem. 

Dessa villkor handlar om hur du kan använda Google Maps och deras övriga regler. Så det är viktigt att läs dem noggrant innan du använder API.

✔️ Underhåll den uppdaterade versionen av Google Maps Plugin

Google Maps släpper regelbundet nya versioner av sitt API. Dessa utgåvor inkluderar nya funktioner och buggfixar. 

Så det är viktigt att behålla ditt Google Maps-plugin uppdaterad till se till att du använder den senaste versionen av API:et och att du inte går miste om några nya funktioner.

📢 Se även – Vad är nytt i WordPress 6.2: 11 huvudfunktioner och mer!

Vanliga frågor

Varför är det viktigt att lägga till på WordPress-webbplatsen? 

Att lägga till Google Maps på din WordPress-webbplats kan förbättra din webbplats lokala SEO, bygga upp besökarnas förtroende, öka webbplatstrafiken och ge dina besökare en bättre användarupplevelse.

Hur skapar jag Google Map Shortcode i WordPress?

För att skapa en kortkod för Google-karta i WordPress, 

• Navigera till Google karta
• Sök efter önskad plats 
• Navigera till  "Dela" ➔ “Bädda in en karta”
• Kopiera den inbäddade HTML-koden
• Skapa eller öppna nu en befintlig sida/inlägg
• Lägg till en ny anpassat HTML-block
• Klistra den inbäddade koden i detta block
• Denna inbäddade iFrame-kod kommer att vara omvandlas till en kortkod när du redigerar sidan eller inlägget

Hur man lägger till Google Maps i WordPress-webbplatsen utan några plugins?

Du kan använda Google Mina kartor och skapa en ny karta för att lägga till grundläggande kartfunktioner till din WordPress-webbplats utan att installera några plugins. Dessutom kan du använda standardmetoden iFrame/shortcode för att bädda in HTML-koden för din föredragna plats Google Map på webbsidan. 

Varför fungerar inte Google Maps på min WordPress-webbplats?

Google Maps kanske inte fungerar på din WordPress-webbplats för felaktig API-nyckelkonfiguration, autentiseringsproblem eller konflikter med andra plugins eller teman. Så det rekommenderas att kontrollera API-nyckelinställningarna och använda uppdaterade versionsplugins och säkerställa kompatibilitet med andra plugins/teman.

Linda upp den

För att öka ditt företags synlighet, bygga upp besökarnas förtroende, öka lokal SEO och driva mer trafik till din webbplats, lägga till Google Maps till WordPress-webbplatsen är en effektiv lösning.

Och nu vet du att "hur man lägger till Google Maps på WordPress-webbplatsen" inte är raketvetenskap. Genom att följa ovanstående 5 steg med ElementsKit och Google Map API, kan du enkelt integrera en enstaka eller flera platskarta på din webbplats. Se bara till att du också följer de bästa metoderna när du integrerar Google Maps på din webbplats. 

Om du har några frågor eller förslag, låt oss veta, så hör vi gärna från dig. Tack för att du läser!