Vill du skapa en karta med flera platser i WordPress med Elementor och Essential Addons?
Anta att du har ett företag som redan har flera filialer i staden, och du vill skapa en digital karta som visar platsen för dessa filialer. Om du har en WordPress-baserad webbplats kan du skapa en sådan karta utan ansträngning. Det finns ett bra plugin du kan använda för att skapa en karta med flera platser: Viktiga tillägg.
Viktiga tillägg är ett tillägg Elementor premium så du måste också installera Elementor innan du kan använda den. Du kan använda den kostnadsfria versionen av Elementor för att skapa ett kort med modulen Essential Addons.
La gratisversionen av Essential Addons finns också tillgänglig. Widgeten för att skapa en karta är dock endast tillgänglig på den betalda versionen. Du kan ladda ner den betalda versionen av Essential Addons på dess officiell hemsida.
Vi kommer att använda Google Maps-plattformen för att skapa en karta på din WordPress med hjälp av Essential Addons. Innan du börjar, se till att installera Elementor och Essential Addons.
Integrera Google Maps med modulen Essential Addons
Innan du kan lägga till en Google Maps-karta med Essential Addons måste du först integrera dem. Du behöver en API-nyckel för att integrera Google Maps med Essential Addons-moduler.
Besök först Google API-konsol och logga in med ditt Google-konto. Skapa ett nytt projekt genom att klicka på rullgardinsmenyn längst upp och klicka på NYTT PROJEKT.
Ge ditt nya projekt ett namn och klicka på knappen SKAPA .
När ditt nya projekt har skapats, välj det från rullgardinsmenyn och klicka på Bibliotek på den vänstra panelen.
Google delar in Google Maps Platform API i 17 typer. Du kan se dem genom att klicka på länken VISA ALLA i avsnittet kartor. Du måste aktivera API:er beroende på vad du vill åstadkomma.
Upptäck också: Hur man skapar en anpassad enstaka produktmall i WooCommerce med Elementor
I vårt fall måste du aktivera följande API:er för att lägga till en karta från Google Maps med hjälp av Essential Addons.
- API-anvisningar
- Geokodnings-API
- Maps JavaScript API
- API-platser
För att aktivera ett API, välj ett API som du vill aktivera (genom att klicka på det) och klicka på knappen AKTIVERA.
När du har aktiverat de nödvändiga API:erna går du tillbaka till huvudinstrumentpanelen i Google API-konsolen och klickar på identifierare på den vänstra panelen. Klicka på knappen Skapa autentiseringsuppgifter och välj API-nyckel. Kopiera API-nyckeln i popup-fönstret som visas.
Logga in på din WordPress-instrumentpanel och klicka Viktiga tillägg på den vänstra panelen. Klicka på fliken Elements och scrolla ner i avsnittet Avancerad Google Map. Klicka på Inställningar och klistra in API-nyckeln du just kopierade.
Klicka på knappen SPARA INSTÄLLNINGAR för att tillämpa den nya ändringen.
Börja skapa kartan
När Google Maps och Essential Addons har integrerats kan du börja skapa kartan. För att göra detta, skapa en ny sida (Sidor – > Lägg till ) eller ett nytt föremål (Objekt – > Lägg till) och redigera den med Elementor.
Innan du skapar sidan, ställ in layouten genom att klicka på kugghjulsikonen i det nedre vänstra hörnet för att öppna panelen Inställningar. Ställ in layouten från rullgardinsmenyn.
Skapa ett nytt avsnitt genom att klicka på plusknappen i redigeringsrutan. För att få ett bredare område för kartan kan du välja strukturen med en kolumn. Dra widgeten EA Google Maps från den vänstra panelen till redigeringsområdet.
Gå till den vänstra panelen och ställ in korttypen till multipelmarkör.
Öppna avsnittet Kartmarkörinställningar och klicka på den befintliga kartmarkören för att redigera den. Klistra in latitud och longitud för den första plats du vill lägga till på kartan. Ställ även in titeln och beskrivningen.
För att få latitud och longitud för en plats, öppna Google Maps och sök efter den plats (plats) vars latitud och longitud du vill få. När du har hittat den klickar du med höger musklick och vänsterklickar på numret som visas på kontextmenyn.
Denna åtgärd låter dig därför kopiera latituden (det första värdet) och longituden (det andra värdet).
När du har lagt till latitud och longitud för den första platsen klickar du på knappen LÄGG TILL ETT ELEMENT för att lägga till en annan plats på kartan.
Öppna Google Maps igen och hitta den nya platsen du vill lägga till på kartan och kopiera longituden samt longituden och klistra in dem i respektive fält som det ovan. Upprepa stegen ovan för att lägga till fler platser på kartan.
Läs också: Hur man använder Elementors inläggswidget
Öppna blocket när du har lagt till platser Kartkontroller för att aktivera/avaktivera de kommandon du vill ange på ditt kort. Du kan även ställa in zoomnivån här.
Du kan också öppna blocket Karttema för att välja det Google Maps-tema du vill använda.
Hittills har du framgångsrikt skapat en karta med flera platser. Du kan öppna fliken Stil för att definiera kartans höjd och bredd.
Om du vill ha en karta i full bredd, ställ in den sektion som innehåller kartan till full bredd. För att göra detta, klicka på handtaget för avsnittet.
I flik och block Layout ställ in Innehållsbredd till full breddr och kolumngapet på Ingen avvikelse
Klicka på knappen PUBLICERADER längst ned i den vänstra panelen för att publicera din sida.
Bädda in kartan på en sida eller ett inlägg
Om du av någon anledning föredrar att bädda in din karta på en sida/inlägg (sidan/inlägget skapat med standardredigeraren för WordPress — Gutenberg), kan du använda Wordpress plugin Elementor block för Gutenberg. Denna plugin kommer att konvertera en Elementor-mall till ett Gutenberg-block.
För att spara kartan du just skapade som en Elementor-mall, klicka på pilikonen bredvid knappen PUBLICERA / UPPDATERA och välj Spara som mall.
Ge din modell ett namn och klicka på knappen REGISTRERARE.
Skapa sedan en ny sida eller inlägg (se till att du har installerat Elementor-plugin Block för Gutenberg). Lägg till ett nytt block och välj Elementor bibliotek och välj mallen du just skapade.
Anm: Om du ser meddelandet "Endast för utvecklingsändamål" när du lägger till ett kort, se till att aktivera din Google Cloud-fakturering. Den nya Google-policyn kräver att utvecklare aktiverar faktureringskontot (du kan fortfarande använda Google Maps API gratis).
Skaffa Elementor Pro nu!!!
Slutsats
Så ! Det var allt för den här artikeln som visar hur du skapar en karta med flera platser med Elementor. Om du har några frågor om hur du kommer dit, låt dem veta i commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
