• Funktioner
  • Skabeloner
  • Prisfastsættelse
  • Danish
  • Funktioner
  • Skabeloner
  • Prisfastsættelse
  • Danish
Ups! Din søgte widget blev ikke fundet! Har du nogen idé? Hvis ja, har jeg en, Indsend her

At integrere Google Map på din hjemmeside er meget nyttigt for onlinebutikker og forretninger. På den ene måde hjælper det folk med at nå dig, på den anden måde kan du markere din butik globalt. I dag vil vi tale om, hvordan du kan integrere Google Maps i WordPress ved hjælp af Elementor page builder.

For det første har Elementor Google-kort widget, som du kan bruge til dette formål. Den har dog begrænsede stilmuligheder. Derfor vil vi i dag bruge Avanceret Google Map widget af Element Pack.

Der er ikke behov for yderligere præsentationer. Lad os komme i gang!

Komplet guide til at integrere Google Map i WordPress

Når du vil bruge Google Map i WordPress, skal du indsætte en API nøgle på dit dashboard. Ved hjælp af denne nøgle skal du godkende dig som bruger hos Google. Lad os se det i billeder.

Inserting Advanced Google Map Widget

Først skal du indsætte Avanceret Google Map widget på din hjemmeside.

Inserting Advanced Google Map Widget

Så snart du trækker og slipper widgetten, vises en popup-meddelelse. For at få kortet til at fungere korrekt beder systemet dig om en API-nøgle. Lad os se, hvordan du gør det.

API settings for Embed Google Map on WordPress

Gå til WordPress Dashboard> Element Pack> API-indstillinger.

Her kan du se et felt med navnet Google Map API-nøgle. Nu skal du indsætte din API-nøgle i feltet og gemme. Du kan dog få nøglen til dit indlejrede Google Map på WordPress fra her.

Blog for dig
Mest populære blogs

Få mere at vide om WordPress

Tilpasning af indholdsfanen på Google Map

Lad os nu ændre kortets udseende efter din smag. I denne del vil vi tale om widgets indstillinger.

Widget Settings of Embed Google Map on WordPress

Som på billedet ovenfor er det første, du vil se, den Google-kort afsnit. Dette er under Fanen Indhold. Den indeholder kortets grundlæggende indstillinger. Omskifterne på skærmen viser/skjuler primært tilsvarende knapper/funktioner på kortet.

Derfor kan du vise/skjule Zoom-knap, søgefelt, Korttype mulighed, og gadebillede kontrol herfra. Desuden er der også Zoom på kortet, Kortets højdeog søgefelt afstand muligheder her. Desuden kan du se kortet i Satellit tilstand eller Gade tilstand.

Widget Settings

Det næste afsnit er Markør. Du kan i det hele taget placere et uendeligt antal markører ved hjælp af Advanced Google Map-widgeten. Hver markør har felter som Breddegrad, Længdegrad, Titelog Indhold. Men når du bruger de to første, skal du angive markørens position.

Et andet vigtigt punkt er, at du kan tilføje brugerdefinerede ikoner som markører. Men du kan ikke finde denne funktion i andre kortlægningswidgets. Denne funktion er eksklusiv for brugere af Element Pack.

Populær blog

Sådan bruger du Iframe Widget i Elementor by Element Pack

Unikke stilarter til indlejring af Google Map i WordPress

Indtil nu har vi kun sat layoutet op. Nu vil vi ændre udseendet af det indlejrede Google Map på WordPress ved hjælp af Elmentor.

Customizing The Style Tab of the Google Map

Igen har Style-fanen to sektioner. Med sektionen GMap-stil kan du indsætte et hvilket som helst skin på dit kort. Disse skins ændrer detaljerne på hele kortet. Derfor behøver du kun at indsætte JSON-koden i det markerede felt. Du kan også bruge CSS Filters for more style.

Snazzy Maps Website

In addition, you can import the JSON codes from Snazzymaps. They have many free and premium map skins available at a cheap rate.

 

Customizing The Style Tab of the Google Map

Finally, the search box at the top of the map is also editable. It is very easy to change its outlook. Then again, change the color, border type, border radius, and add box shadow to the search box. Make sure that the finished product catches the eyes of the visitors.

Konklusion

Examples of Advanced Google map

Well done! You have successfully learned the whole process. With this blog, I hope you can make embed google map on WordPress using Elementor easily. For any further information, please visit our knowledge base. Without further ado, stay safe. Thanks for reading this blog!

Ophavsret © 2025 BdTemaer. Alle rettigheder forbeholdes.

Money Transfer Logo