Wil je een kaart maken met meerdere locaties in WordPress met Elementor en essentiële add-ons?
Stel, je hebt een bedrijf dat al meerdere vestigingen in de stad heeft en je wilt een digitale kaart maken waarop de locatie van die vestigingen te zien is. Als u een op WordPress gebaseerde website heeft, kunt u zo'n kaart moeiteloos maken. Er is een geweldige plug-in die u kunt gebruiken om een kaart met meerdere locaties te maken: Essentiële add-ons.
Essentiële add-ons is een toevoeging Elementor premium, dus je moet ook Elementor installeren voordat je het kunt gebruiken. U kunt de gratis versie van Elementor gebruiken om een kaart te maken met de module Essential Addons.
La gratis versie van Essential Addons is ook beschikbaar. De widget om een kaart te maken is echter alleen beschikbaar in de betaalde versie. U kunt de betaalde versie van Essential Addons downloaden op zijn officiële website.
We zullen het Google Maps-platform gebruiken om een kaart op uw WordPress te maken met behulp van Essential Addons. Voordat u begint, moet u ervoor zorgen dat u Elementor en Essential Addons installeert.
Integreer Google Maps met de Essential Addons-module
Voordat u een Google Maps-kaart met Essential Addons kunt toevoegen, moet u deze eerst integreren. U hebt een API-sleutel nodig om Google Maps te integreren met Essential Addons-modules.
Bezoek eerst de Google API-console en meld u aan met uw Google-account. Maak een nieuw project aan door bovenaan op het vervolgkeuzemenu te klikken en op te klikken NIEUW PROJECT.
Geef je nieuwe project een naam en klik op de knop SCHEPPEN .
Zodra uw nieuwe project is gemaakt, selecteert u het in het vervolgkeuzemenu en klikt u op bibliotheek op het linkerpaneel.
Google verdeelt de Google Maps Platform API in 17 typen. Je kunt ze bekijken door op de link te klikken ALLES WEERGEVEN in de sectie Kaarten. U moet API's inschakelen, afhankelijk van wat u wilt bereiken.
Ontdek ook: Hoe maak je een aangepaste sjabloon voor één product in WooCommerce met Elementor
In ons geval moet u de volgende API's inschakelen om een kaart uit Google Maps toe te voegen met Essential Addons.
- API-aanwijzingen
- Geocoderings-API
- Kaarten JavaScript-API
- Places-API
Om een API te activeren, selecteert u een API die u wilt activeren (door erop te klikken) en klikt u op de knop ACTIVEREN.
Zodra u klaar bent met het inschakelen van de vereiste API's, keert u terug naar het hoofddashboard van de Google API Console en klikt u op identifiers op het linkerpaneel. Klik op de knop Inloggegevens maken en selecteer API-sleutel. Kopieer de API-sleutel in de pop-up die verschijnt.
Log in op uw WordPress-dashboard en klik Essentiële add-ons op het linkerpaneel. Klik op het tabblad Elementen en scroll naar beneden in de sectie Geavanceerde Google Map. Cliquez sur Instellingen en plak de API-sleutel die u zojuist hebt gekopieerd.
Klik op de knop INSTELLINGEN OPSLAAN om de nieuwe wijziging toe te passen.
Begin met het maken van de kaart
Zodra Google Maps en de essentiële add-ons zijn geïntegreerd, kunt u beginnen met het maken van de kaart. Maak hiervoor een nieuwe pagina aan (Pagina's -> Toevoegen ) of een nieuw artikel (Artikelen – > Toevoegen) en bewerk het met Elementor.
Voordat u de pagina maakt, stelt u de lay-out in door op het tandwielpictogram in de linkerbenedenhoek te klikken om het paneel Instellingen te openen. Stel de lay-out in via het vervolgkeuzemenu.
Maak een nieuwe sectie door op de plusknop in het bewerkingsvak te klikken. Om een groter gebied voor de kaart te hebben, kunt u de structuur met één kolom selecteren. Sleep de widget EA Google Maps van het linkerpaneel naar het bewerkingsgebied.
Ga naar het linkerpaneel en stel het kaarttype in op meervoudige marker.
Open de sectie Instellingen kaartmarkering en klik op de bestaande kaartmarkering om deze te bewerken. Plak de lengte- en breedtegraad van de eerste locatie die u aan de kaart wilt toevoegen. Stel ook de titel en de beschrijving in.
Om de lengte- en breedtegraad van een locatie te krijgen, opent u Google Maps en zoekt u naar de locatie (plaats) waarvan u de breedte- en lengtegraad wilt ophalen. Eenmaal gevonden, klik met de rechtermuisknop en klik met de linkermuisknop op het nummer dat in het contextmenu verschijnt.
Met deze actie kunt u dus de breedtegraad (de eerste waarde) en de lengtegraad (de tweede waarde) kopiëren.
Wanneer u klaar bent met het toevoegen van de lengte- en breedtegraad van de eerste locatie, klikt u op de knop VOEG EEN ELEMENT TOE om een andere locatie aan uw kaart toe te voegen.
Open Google Maps opnieuw en zoek de nieuwe locatie die u aan de kaart wilt toevoegen en kopieer zowel de lengtegraad als de lengtegraad en plak ze in de respectievelijke velden zoals hierboven. Herhaal de bovenstaande stappen om meer locaties aan de kaart toe te voegen.
Lees ook: Hoe de berichtenwidget van Elementor te gebruiken
Wanneer u klaar bent met het toevoegen van locaties, opent u het blok Kaartbediening om de commando's die u op uw kaart wilt geven in/uit te schakelen. U kunt hier ook het zoomniveau instellen.
Je kunt het blok ook openen Kaartthema om het Google Maps-thema te selecteren dat u wilt gebruiken.
Tot nu toe heb je met succes een kaart gemaakt met meerdere locaties. U kunt het tabblad openen stijl om zowel de hoogte als de breedte van de kaart te definiëren.
Als u een kaart op volledige breedte wilt, stelt u het gedeelte met de kaart in op volledige breedte. Klik hiervoor op het handvat van de sectie.
In tabblad en blok lay-out stel Inhoudsbreedte in op volledige breedter en de kolomopening aan Geen afwijking
Klik op de knop GEPUBLICEERDER onderaan het linkerdeelvenster om uw pagina te publiceren.
Sluit de kaart in een pagina of bericht in
Als je om wat voor reden dan ook liever je kaart insluit in een pagina/post (de pagina/post gemaakt met de standaard WordPress - Gutenberg) editor, kun je de WordPress Plugin Elementorblokken voor Gutenberg. Deze plug-in converteert een Elementor-sjabloon naar een Gutenberg-blok.
Om de kaart die u zojuist hebt gemaakt op te slaan als een Elementor-sjabloon, klikt u op het pijlpictogram naast de knop PUBLICEREN / BIJWERKEN en selecteer Opslaan als sjabloon.
Geef je model een naam en klik op de knop OPNEMEN.
Maak vervolgens een nieuwe pagina of bericht aan (zorg ervoor dat u de Plug-in Elementor Blokken voor Gutenberg). Voeg een nieuw blok toe en selecteer Elementor-bibliotheek en selecteer de sjabloon die u zojuist hebt gemaakt.
Remarque: Als u het bericht 'Alleen voor ontwikkelingsdoeleinden' ziet wanneer u een kaart toevoegt, moet u uw Google Cloud-facturering inschakelen. Het nieuwe Google-beleid vereist dat ontwikkelaars het factureringsaccount activeren (u kunt de Google Maps API nog steeds gratis gebruiken).
Koop Elementor Pro nu!!!
Conclusie
Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u met Elementor een kaart met meerdere locaties kunt maken. Als u zich zorgen maakt over hoe u daar kunt komen, laat het hen dan weten in de commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
