• Funktioner
  • Mallar
  • Prissättning
  • Swedish
  • Funktioner
  • Mallar
  • Prissättning
  • Swedish
Ops! Din sökta widget hittades inte! Har du någon idé? Om du har det, Skicka in här

Att bädda in Google Map på din webbsida är mycket användbart för onlinebutiker och butiker. På ett sätt hjälper det människor att nå dig, på ett annat sätt kan du markera din butik globalt. Idag kommer vi att prata om hur du kan bädda in Google Maps på WordPress med hjälp av Elementor sidbyggare.

För det första har Elementor Google-karta widget som du kan använda för detta ändamål. Det har dock begränsade stilalternativ. Därför kommer vi idag att använda Avancerad Google-karta widget av Element Pack.

Inga fler presentationer behövs. Låt oss börja!

Komplett guide för att bädda in Google Map på WordPress

När du vill använda Google Map på WordPress måste du infoga en API nyckel på din instrumentpanel. Med hjälp av den här nyckeln måste du autentisera dig som användare till Google. Låt oss se i bilder.

Inserting Advanced Google Map Widget

Först sätter du in Avancerad Google-karta widget på din webbplats.

Inserting Advanced Google Map Widget

Så snart du drar och släpper widgeten kommer den att visa ett popup-meddelande. För att kartan ska fungera korrekt kommer systemet att be API-nyckeln från dig. Låt oss se hur man gör det.

API settings for Embed Google Map on WordPress

Gå till WordPress Instrumentpanel> Element Pack> API-inställningar.

Här kan du se ett fält som heter API-nyckel för Google Map. Nu måste du lägga in din API-nyckel i rutan och spara. Du kan dock få nyckeln för din inbäddade Google-karta på WordPress från här.

Blogg för dig
Mest populära bloggar

Läs mer om WordPress

Anpassa innehållsfliken på Google Map

Låt oss nu ändra utsikten över kartan efter din smak. I den här delen kommer vi att prata om inställningarna för widgeten.

Widget Settings of Embed Google Map on WordPress

Som i bilden ovan är det första du kommer att se Google-karta sektion. Detta är under Fliken Innehåll. Den innehåller grundinställningarna för kartan. Omkopplarna på skärmen visar/döljer huvudsakligen motsvarande knappar/funktioner på kartan.

Därför kan du visa/dölja zoomknapp, Sökruta, Karttyp alternativet, och gatuvy kontroll härifrån. Dessutom finns det också Kartzoom, kartans höjd, och sökruta avstånd alternativ här. Dessutom kan du visa kartan i Satellit läge eller Gata läge.

Widget Settings

Nästa avsnitt är Markera. För all del, du kan placera ett oändligt antal markörer med hjälp av widgeten Advanced Google Map. Varje markör har fält som Latitud, Longitud, Titel, och Innehåll. Om du använder de två första måste du dock ange markörens position.

En annan viktig punkt är att du kan lägga till anpassade ikoner som markörer. Du kan dock inte hitta den här funktionen med några andra kartläggningswidgets. Denna funktion är exklusiv för Element Pack-användare.

Populär blogg

Hur man använder Iframe Widget i Elementor av Element Pack

Unika stilar för den inbäddade Google-kartan på WordPress

Hittills har vi bara skapat en layout. Nu kommer vi att ändra utsikterna för den inbäddade Google-kartan på WordPress med hjälp av Elmentor.

Customizing The Style Tab of the Google Map

Stilfliken har återigen två sektioner. Med fliken GMap-stil kan du infoga valfri skin på din karta. Dessa skins ändrar detaljerna för hela kartan. Därför behöver du bara klistra in JSON-koden i det markerade fältet. Du kan också använda CSS-filter för mer stil.

Snazzy Maps Website

Dessutom kan du importera JSON-koderna från Snazzymaps. De har många gratis och premium kartskinn tillgängliga till ett billigt pris.

 

Customizing The Style Tab of the Google Map

Slutligen är sökrutan högst upp på kartan också redigerbar. Det är mycket enkelt att ändra dess utseende. Ändra färg, kanttyp, kantradie och lägg till en boxskugga i sökrutan. Se till att den färdiga produkten fångar besökarnas ögon.

Slutsats

Examples of Advanced Google map

Bra gjort! Du har framgångsrikt lärt dig hela processen. Med den här bloggen hoppas jag att du enkelt kan göra inbäddad Google-karta på WordPress med Elementor. För ytterligare information, vänligen besök vår Kunskapsbas. Utan vidare ado, håll dig säker. Tack för att du läser den här bloggen!

Upphovsrätt © 2025 BdTema. Alla rättigheter reserverade.

Money Transfer Logo