Sådan tilføjes Google Maps til WordPress-webstedet (den nemmeste måde)

Tilføjelse af et Google Map på dit websted gør det ikke kun nemt for besøgende at finde din virksomheds placering, men tilføjer også et strejf af professionalisme og funktionalitet. 

Men hvordan man tilføjer Google Maps til WordPress-webstedet? 🤔

Bare rolig! Vi viser den nemmeste metode:

• Brug af et WordPress-plugin (ElementsKit)

Du kan spørge, hvorfor ElementsKit? 

Nå, det tilbyder en Google Map-widget, som du kan indsætte ved blot Træk og slip. Du får også enorme tilpasningsmuligheder at tilpasse dit Google Map, så det ser ud præcis, som du ønsker det. Så du behøver ikke at være en kodende whiz for at få det til at ske!

Lad os dykke ned! 🥳

Hvad er Google Maps?

Google Maps er en webmapping-tjeneste udviklet af Google til vise nøjagtige placeringer og retninger for enhver adresse. 🗺️

Google Maps er en webmapping-tjeneste udviklet af Google til vise nøjagtige placeringer og retninger for enhver adresse. Du kan se satellitbilleder, gadekort og 360° panoramaudsigt af gader. Desuden tilbyder Google Maps også trafikforhold i realtid og bedste ruteplanlægning til at rejse til fods, i bil, på cykel eller med offentlig transport. 🛣️🚦

Hvordan fungerer Google Maps så? Nå, Google Maps fungerer primært ved hjælp af en komplet kombination af satellit- og jordbaserede billeder. Samtidig indsamler den løbende brugerfeedback for at fortsætte med en valideringsproces og forbliver opdateret med den konstante ændring i realtidsforhold. ⏳

Sådan tilføjes Google Maps til WordPress-webstedet i 5 trin 

Den nemmeste måde at integrere Google Maps i WordPress er ved at bruge et WordPress-plugin. Manuel integration er også mulig, men det er svært at få alle faciliteter og tilpasningsmuligheder uden et plugin.

For at tilføje Google Maps til dit WordPress-websted skal du ElemenetKit WordPress plugin er det bedste valg. Det er en ultimativ alt-i-en Elementor-tilføjelse til WordPress-webstedet, som allerede nåede 1M+ aktiv installation milepæl. 

Du vil få 85+ brugerdefinerede Elementor-widgets sammen med Google Map. Med flere typer kortstile finder du adskillige tilpasningsmuligheder, der helt sikkert vil passe til dine præferencer, webstedstype såvel som brugernes behov.

Lad os udforske det enkle 5 trin til, hvordan du tilføjer Google Maps til WordPress-webstedet ved hjælp af ElementsKit-plugin! 🙌 

✨✨ Krav 
✅ Elementor – Download Elementor
✅ ElementsKit Lite – Download ElementsKit Lite
✅ ElementsKit Pro – Hent ElementsKit Pro
✅ Google Map API – Få Google Map API

Trin 1: Installer ElementsKit Plugin 

Installationsprocessen af ElementsKit ligner enhver anden plugin-installation i WordPress. Du kan installere og aktivere det direkte eller uploade pluginnets zip-fil, og derefter installere og aktivere licensen. For at installere ElementsKit, 

• Gå til dit WordPress-dashboard 
• Klik på Plugins ➔ "Tilføj nyt" 
• Download ElementsKit WordPress-plugin Zip-fil og upload filen 
• Eller søg efter ElementetKit tilføjelse  i søgefeltet
• Klik derefter på "Installere"
• Når det er installeret, klik på "Aktivér"

🎯 Da Google Map-funktionen er en pro widget af ElementsKit, skal du købe en premium-pakke og aktivere licensen. 

👉 Her er dokumentationsvejledningen vedr hvordan man køber og aktiverer ElementsKit Pro-licensen. 

Trin 2: Generer en Google Map API-nøgle

Nu skal du generere Google Map API-nøglen for at oprette forbindelse til dit WordPress-websted. Google Maps API (Application Programming Interface) er en unik kode givet af Google til at integrere og bruge Google Maps-funktionalitet i dine egne hjemmesider eller andre applikationer. 

• Naviger til Konfigurer i Cloud Console
• Klik på "Opret nyt projekt"

• Skriv din Projekt navn og Beliggenhed 
• Klik på "SKAB"

• Det vil omdirigere til hamburgermenuen
• Vælg "API'er og tjenester" mulighed
• Klik på "AKTIVER APIS OG TJENESTER"

• Søg Kort i søgefeltet
• Eller klik på  "Maps JavaScript API"

• Hvis du ikke har premium-planerne, skal du oprette din konto med de nødvendige oplysninger (land, kortoplysninger, faktureringsadresse osv.)

• Aktivér derefter Maps JavaScript API 
• Gå nu til Google Maps Platform ➔ Oplysningsside
• Vælg en projekt eller du kan også oprette et nyt projekt herfra
• Klik på "Opret legitimationsoplysninger", og det vil generere en ny API nøgle for dig

• Klik derefter Opret legitimationsoplysninger ➔ API-nøgle
• Du kan se den nyoprettede API-nøgle til Google Maps på siden med legitimationsoplysninger under API-nøgler
• Kopi API-nøglen herfra
• Klik på Luk

❗❗Husk at begrænse API'en nøglen, før du bruger den på dit WordPress-websted❗❗

Trin 3: Forbind Google Map API Key med ElementsKit 

Nu skal du tilslut den nyoprettede Google Map API-nøgle til din WordPress hjemmeside. For at gøre det skal du indsætte API-nøglen i Google Map-sektionen af ElementsKit. 

• Gå til dit WordPress-dashboard 
• Klik på "ElementsKit" 
• Gå til "WIDGETS" mulighed
• Rul ned, du kan se Google Map-widgetten  
• Tænd for "Google kort" widget 
• Klik på "Gem ændringer"

• Navigere  "ElementsKit" ➔ "Brugerindstillinger"
• Rul ned og klik på "Google kort" mulighed 
• Indsæt API-nøglen på indtastningsfeltet 
• Klik på "Gem ændringer"

Trin 4: Træk og slip Google Map Widget inde på siden/indlægget

Nu er det tid til at se, hvordan du tilføjer Google Maps til WordPress-webstedet ved blot at trække-og-slip:

• Opret en ny side/indlæg eller åbn en eksisterende side/indlæg 
• Klik på "Rediger med Elemetor" 
• Søg efter "Google kort" widget af Elemenetkit 
• Træk og slip widgetten inde i den blok, hvor du vil vise kortet

🟢 Bemærk: Du kan tilføje flere kort og tilpasse dem individuelt ved hjælp af den samme widget. Alt du skal gøre er at vælge en Elementor-blok og derefter trække og slippe Google Map-widgetten. 🟢

Trin 5: Tilpas Google Map-indstillingerne 

Nu er det sidste trin at tilpasse Google Maps efter dine præferencer. ElementsKit tilbyder tonsvis af tilpasningsmuligheder, herunder indhold, stil og avancerede indstillinger til layout, bevægelseseffekter, reaktionsevne, tilpasset CSS osv. 

Lad os se, hvordan du kan tilpasse Google Maps ved hjælp af tilpasningsmulighederne i ElementsKit på dit WordPress-websted. 

Indholdstilpasning 

I dette afsnit kan du vælge korttype og adressetype og indstille tilpasset breddegrad og længdegrad for at tilføje den adresse, du vil vise på dit websted. Der er også tilpasningsmuligheder for kortmarkører, kontroller og temaer. 

🌎 Korttype 

ElementsKit tilbyder alsidige kortlægningsplatforme fra denne ene widget. Du kan vælge korttype fra rullemenuen. 

• Klik på Indstillinger ➔ Vælg korttype  

Her kan du få 7 typer Google maps, såsom:

1️⃣ Grundlæggende: Med den grundlæggende Google Map-funktionalitet kan dine webstedsbrugere søge efter steder, se kort og få rutevejledning til forskellige destinationer. 

Hvis du er nybegynder og ønsker at tilføje et simpelt Google Map til din WordPress hjemmeside med en markør, så gå efter den grundlæggende korttype. 

2️⃣ Multipel markør: Brug af flere Google Maps er ideelt for dig, hvis du planlægger ture eller fremhæver forskellige steder. Besøgende på din hjemmeside kan markere og mærke flere punkter af interesse på et enkelt kort. 

3️⃣ Statisk: Ved at bruge den statiske kortfunktion i ElementsKit kan du give dine brugere mulighed for at generere et statisk billede af et kort. Denne type kort kan indlejres i dine WordPress-websteder, hvis du ønsker det del offline visning. 

4️⃣ Polyline:  du bruger Polyline-type Google Maps på dit WordPress-websted for at give brugerne mulighed for at oprette og vise linjer på kortet for at se ruterne, grænserne eller specifikke interesseområder.

5️⃣ Overdrevent: ElementsKits Google Maps-widget understøtter også overlejringsintegrationsfunktionen. Ved at bruge denne type kort kan du få vist overlejringen yderligere data såsom vejrinformation, trafikforhold eller brugerdefinerede lag på kortet for forbedret visualisering. 

6️⃣ Med ruter: Når du bruger kortet med ruter af ElementsKit, kan besøgende på dit websted indtaste deres start- og destinationspunkter for at få detaljerede sving-for-sving-vejledninger. Derudover kan de se den anslåede rejsetid og trafikopdateringer i realtid. 

Det vil hjælpe med at finde ud af deres afstand fra din placering, eller mere egnet, når du skal tilføje flere kontor-/filialadresser til din hjemmeside.

7️⃣ Panorama: Du kan også få vist panoramavisningen ved hjælp af Google Map-widgetten i ElementsKit. Panoramaudsigt, også kendt som Street View, vil give brugerne en 360 grader virtuel rundvisning på forskellige steder. Det vil give webstedets besøgende mulighed for at udforske steder, som om de var fysisk til stede.

👉👉 For hver type korttilpasning i detaljer, kan du tjekke denne dokumentation - Google-kort på WordPress-siden.

📌 Adressetype 

For hver type kan du vælge Adressetype som adresse ved skrive placeringsnavnet direkte eller indstilling af bredde- og længdegraden for den respektive adresse. 

Imidlertid er bredde- og længdegrad geografiske koordinater at repræsentere et bestemt sted på jordens overflade. 

Breddegrad er måling af et punkts afstand nord eller syd af Ækvator. På den anden side definerer længdegrad målingen af et punkts afstand øst eller vest af Prime Meridian.

Få breddegrad og længdegrad: 

• Gå til https://www.google.com/maps/
• Søg i navn af din placering
• Højreklik på punktet på kortet
• Du kan se værdier for breddegrad (venstre) og længdegrad (højre)
• Nu kopi breddegrad og længdegrad
• Næste, sæt ind dem i deres inputfelter

🔖 Markørindstillinger 

Her kan du tilpasse mulighederne for at markere lokationen ved hjælp af titel, indhold, ikon osv. 

• Tilføj en Google map titel for at vise navnet, mens nogen søger efter din placering
• Skriv indhold med 1-2 linjer til beskriv adressen når du svæver over kortet 
• Aktiver til/fra-knappen for at tilføje en brugerdefineret markørikon
• Upload markørikon, du kan bruge dit firmalogo eller andre ikoner til at beskrive din identitet 
• Sæt tilpasset bredde og højde for markørikonet 

🟢 For flere markører af typen Google Map kan du uploade og tilpasse flere ikoner for hver placering. 🟢

🎛️ Styringer

Du kan styre zoomniveauet, gadevisning, korttype, kortrulning osv. fra denne indstilling. 

• Kontrol zoom niveau: Angiv et hvilket som helst tal for at definere zoomniveauet.
• Aktiver Street View-kontrol: Aktiver for at vise kortet med Street View.
• Slå korttypekontrol til: Tænd for at give brugeren mulighed for at kontrollere korttypen, f.eks. køreplan, satellit osv.
• Aktiver zoomkontrol: Tænd for at tilføje et zoomkontrolikon til at zoome ind (+) og zoome ud (-) på kortet.
• Aktiver fuldskærmskontrol: Slå denne indstilling til vil give brugeren mulighed for at se kortet i fuldskærmstilstand.
• Aktiver rullehjulszoom: Aktivering af rullekontrolhjulet vil øge eller mindske zoomfaktoren med 10% for hvert klik, op eller ned.

🎨 Temaer

Du kan tilpasse Google Map-temakilden og -stilene. Hvis du kan tilføje et brugerdefineret tema, er det også muligt i ElementsKit Google Map-widgetten. 

✨ Google Standard Temakilde 

• Klik på tema ➔ Vælg kildetype: Google Standard  
• Vælg standardtemastile fra rullemenuen:
  • Standard, Sliver, Retro, Dark, Night og Aubergine

✨ Snazzy Maps-temakilde 

• Hvis du vil tilføje forskellige farveskemaer, så er Snazzy Map for dit websted. 
• Klik på tema ➔ Vælg kildetype: Snazzy Maps
• Vælg stilene fra rullemenuen:
  • Standard, Enkel, Farverig, Kompleks, Mørk, Gråtoner, Monokrom, Ingen etiketter og Tofarvet 

✨ Brugerdefineret tema

• Du kan også tilføje et brugerdefineret tema efter dine præferencer og behov. 
• Vælg temakilde ➔ Brugerdefineret
• Tilføj en brugerdefineret temastil på det givne felt 
• Klik på "Klik her" for at få JSON-stilkoden for din valgte stilart 

Tilpasning af stil

Du får fuld fleksibilitet til at indstille tilpasset højde, bredde og kortjustering baseret på websidens design. 

➡️ Højde: Indstil tilpasset højde for kortet

➡️ Bredde: Juster bredden efter dine præferencer

➡️ Justering: Indstil justeringen af Google-kortet til venstre, højre eller midten

Avanceret tilpasning 

Du kan styre alle kortlayoutets stilarter og andre funktioner og tilpasse dem fra de avancerede indstillinger i ElementsKit Google Map-widgetten. 

⏺️ Indstil brugerdefinerede værdier for hele layoutet bredde, margen, polstring, position og z-indeks 

⏺️ Sæt bevægelseseffekter for inputfelterne (f.eks. zoom ind, zoom ud, fade ind, fade ud osv.)

⏺️ Vælg layout baggrundstype og farve

⏺️ Tilpas kanttype, radius, maske og enhedsrespons (pc, fane, mobil)

⏺️ Indsæt attributter og tilpasset CSS for yderligere funktioner 

5 fordele ved at indsætte Google Maps på WordPress-webstedet 

Tilføjelse af Google Maps til dit websted giver adskillige fordele. Her er 5 store fordele for at integrere Google Maps på dit WordPress-websted:

1. Øger virksomhedens synlighed 

Når nogen besøgende lander på dit websted, vil Google Maps hjælpe dem med at se din placering og give en klar idé hvor din virksomhed er beliggende. 

Da denne funktion er særlig nyttig for virksomheder med fysiske butiksfacader eller kontorer. Så hvis du har flere grene, kan du vise dem på et enkelt kort. 

Det vil hjælpe dine kunder med at finde ud af nye og nærliggende filialer. De kan blot klikke på markørerne for at få adressen og rutevejledningen til hver lokation. 

Som et resultat kan du øge din virksomhedens synlighed over for potentielle kunder på dit WordPress-websted. 

2. Giver nøjagtige anvisninger 

En af de primære fordele ved at inkorporere Google Maps i dit WordPress-websted er at give præcise anvisninger til din virksomhed. Besøgende kan indtaste deres aktuelle placering og modtage trin-for-trin vejledning til din placering. 

Denne funktion er yderst praktisk for kunder, der ikke er bekendt med området eller er afhængige af offentlig transport. Nøjagtige anvisninger hjælper med at sikre, at potentielle kunder nemt kan nå din virksomhed uden besvær eller forvirring. 

3. Fremviser lokal SEO

Lokal søgemaskineoptimering (SEO) er afgørende for virksomheder, der målretter et specifikt geografisk område. Ved at integrere Google Maps i dit WordPress-websted kan du vise din virksomheds placering i søgeresultaterne. 

Ifølge nyere undersøgelser er ca 46% af alle søgninger har lokal hensigt. Det indikerer, at internetbrugere leder efter deres nærmeste virksomheder, tjenester eller produkter.

Så tilføjelse af et Google Map vil øge dine chancer for at dukke op i lokalpakke eller kortpakke. Det er den sektion af søgeresultater, der viser et kort med lokale virksomheder relateret til søgeforespørgslen. 

Som et resultat kan du udnytte dette store lokale søgepublikum og forbedre dine chancer for at tiltrække lokale kunder. 

4. Faciliterer eventplanlægning 

At integrere Google Maps i dit WordPress-websted kan forenkle begivenhedsplanlægningsproces for både dig og dine deltagere til forretningsbegivenheder eller sammenkomster. Du kan indlejre et kort på din begivenhedsside for at give præcis placering og retninger til spillestedet. 

Dette vil spar dine besøgende tid og kræfter i at søge efter lokalet separat. Derudover kan du inkludere markører for nærliggende offentlige transportstop, parkeringsområder eller overnatningssteder for at gøre det endnu nemmere for deltagerne at planlægge deres besøg. 

5. Forbedre tillid, troværdighed og brugeroplevelse 

Sidst men ikke mindst, når du har en adresse på Google Maps, er det med til at skabe tillid blandt besøgende. Det viser gennemsigtighed og giver kunderne et visuelt bevis på din eksistens. 

Desuden, når besøgende nemt kan se din placering, er de mere tilbøjelige til at stole på din virksomhed, især hvis de kan finde positive anmeldelser og vurderinger forbundet med din placering.

Det kan også hjælpe at tilføje et Google Map til dit WordPress-websted øge mærket kreditværdigt samt udjævne brugeroplevelsen ved nøjagtig vejledning af din virksomhedsplads. Det vil reducere behovet for, at brugere skifter mellem platforme for at finde rutevejledninger eller søge efter din virksomhed på eksterne korttjenester. 

Ved at holde besøgende på dit websted, kan du give en problemfri oplevelse, øger chancerne for konverteringer og kundetilfredshed.

🔔 Folk læser også – Oprettelse af et nyhedsmærke i WordPress: 3 nemme trin

5 bedste fremgangsmåder til brug af Google Maps i WordPress

Her er 5 bedste praksis for at bruge Google Maps på WordPress-websteder for at forbedre brugeroplevelsen samt være på forkant med SEO-spil. 

✔️ Sikre den rigtige placering af kortet

Passende kortplacering er afgørende for både brugervenlighed og søgemaskineoptimering (SEO). For eksempel kan du vise dit placeringskort på kontaktside eller sidefoden. 

Der er ingen strenge regler for kortplacering på din hjemmeside, bare du skal placere dit kort et sted, hvor det er let for besøgende at finde og bruge.  

✔️ Optimer kortets indlæsningstid og ydeevne

Sørg for, at du har optimeret indlæsningstiden af kortet. Fordi et kort, der indlæses langsomt, kan være frustrerende for besøgende og kan også skade din SEO. 

Du kan bruge en letvægts Google Maps plugin med alle tilpasningsmuligheder som ElementsKit. Hvis du bruger en alternativ metode i stedet for et plugin, formindske og komprimere JavaScript og CSS filer, før du udgiver Google Map på din hjemmeside. 

✔️ Sikre responsivt design til mobile enheder

Enhedens reaktionsevne er et must. Sørg for, at kortet automatisk justerer dets størrelse og layout til passer til enhver skærmstørrelse fx pc, fane eller mobiltelefon. 

Dette er vigtigt for at sikre, at besøgende har en god oplevelse se dit kort ikke kun på pc eller store skærme, men også på mobile enheder.

✔️ Sikre overholdelse af Google Maps API-vilkår og -betingelser

Google Maps har en sæt vilkår og betingelser at du skal acceptere og følge dem. 

Disse vilkår og betingelser handler om, hvordan du kan bruge Google Maps og deres øvrige regler. Så det er vigtigt at læs dem omhyggeligt før du bruger API'en.

✔️ Vedligehold den opdaterede version af Google Maps Plugin

Google Maps udgiver regelmæssigt nye versioner af sin API. Disse udgivelser omfatter nye funktioner og fejlrettelser. 

Så det er vigtigt at beholde dit Google Maps-plugin ajour til sikre, at du bruger den nyeste version af API'en, og at du ikke går glip af nye funktioner.

📢 Se også – Hvad er nyt i WordPress 6.2: 11 vigtige funktioner og mere!

Ofte stillede spørgsmål

Hvorfor er det vigtigt at tilføje til WordPress-webstedet? 

Tilføjelse af Google Maps til dit WordPress-websted kan forbedre dit websteds lokale SEO, opbygge besøgendes tillid, øge webstedstrafikken og give dine besøgende en bedre brugeroplevelse.

Hvordan opretter man Google Map Shortcode i WordPress?

For at oprette en Google-kortkortkode i WordPress, 

• Naviger til Google kort
• Søg efter din ønskede placering 
• Naviger til  "Del" ➔ "Integrer et kort"
• Kopi den indlejrede HTML-kode
• Opret eller åbn nu en eksisterende side/indlæg
• Tilføj en ny tilpasset HTML-blok
• sæt ind den indlejrede kode i denne blok
• Denne indlejrede iFrame-kode vil være konverteret til en kortkode når du redigerer siden eller indlægget

Sådan tilføjes Google Maps til WordPress-webstedet uden plugins?

Du kan bruge Google My Maps og opret et nyt kort for at tilføje grundlæggende kortfunktioner til dit WordPress-websted uden at installere plugins. Desuden kan du bruge standard iFrame/shortcode-metoden til at indlejre HTML-koden for din foretrukne placering Google Map på websiden. 

Hvorfor virker Google Maps ikke på mit WordPress-websted?

Google Maps virker muligvis ikke på dit WordPress-websted for forkert API-nøglekonfiguration, autentificeringsproblemer eller konflikter med andre plugins eller temaer. Så det anbefales at kontrollere API-nøgleindstillingerne og bruge opdaterede versionsplugins og sikre kompatibilitet med andre plugins/temaer.

Pak den ind

For at øge din virksomheds synlighed, opbygge besøgendes tillid, boost lokal SEO, og drev mere trafik til dit websted, tilføjer Google Maps til WordPress-siden er en effektiv løsning.

Og nu ved du, at "hvordan man tilføjer Google Maps til WordPress-webstedet" ikke er raketvidenskab. Ved at følge ovenstående 5 trin ved hjælp af ElementsKit og Google Map API, kan du nemt integrere et enkelt eller flere placeringskort på dit websted. Bare sørg for, at du også følger de bedste fremgangsmåder, mens du integrerer Google Maps på dit websted. 

Hvis du har spørgsmål eller forslag, så lad os det vide, og vi vil være glade for at høre fra dig. Tak fordi du læste med!