Als u een service zoals gebruikt Google Maps, u hoeft alleen maar een locatie te kiezen en de kaart op uw website in te sluiten. U kunt kaarten echter niet direct bewerken, en uw collega's ook niet - wat vaak nodig is voor samenwerkingsprojecten.

Dit is waar interactieve kaarten binnenkomen. Hiermee kunt u verplaatsbare markeringen plaatsen die iedereen in uw team kan bewerken. 

In deze tutorial gaan we het hebben over wanneer dit type kaart van pas komt. Bovendien laten we u zien hoe u ze op twee manieren aan WordPress kunt toevoegen.

Maar voordat u begint, neem de tijd om een ​​kijkje te nemen Hoe maak je een WordPress thema te installerenHoeveel plugins moet ik installeren op WordPress.

Toen, mlaten we aan het werk gaan!

Wat is een interactieve kaart (en wanneer moet u deze gebruiken?)

Het toevoegen van een kaart aan een website is vrij eenvoudig. Tools zoals Met Google Maps kunt u binnen enkele minuten kaarten in uw pagina's insluiten. Het voordeel van deze benadering is dat bezoekers over de kaarten kunnen bewegen, inzoomen, uitzoomen, etc.

Dit soort kaarten is interactiever dan alleen afbeeldingen, maar u kunt er geen wijzigingen op aanbrengen nadat u ze aan uw website heeft toegevoegd.

Aan de andere kant kunt u met interactieve kaarten (en in sommige gevallen uw collega's) nieuwe markeringen, pictogrammen, tekst en meer toevoegen. Stel je voor dat je een bijeenkomst plant voor leden van je website. U kunt een kaart met meerdere pinnen configureren om locaties voor te stellen.

Ontdek het trouwens 5 WordPress plug-ins om geolocatie toe te voegen aan uw blog

U kunt ook een interactieve kaart gebruiken zodat uw gebruikers hun locaties kunnen delen of kunnen navigeren naar plaatsen die ze willen bezoeken. Om preciezer te zijn, dit zijn nichetoepassingen. Echter, de interactieve kaarten  peuvent  nuttig zijn in een breed scala van situaties. 

Bovendien zijn ze niet noodzakelijkerwijs moeilijker toe te voegen dan hun tegenhangers.

Hoe interactieve kaarten aan uw WordPress-site toe te voegen

Als het gaat om interactieve kaarten, kunt u er een insluiten op uw website of een plug-in gebruiken om u daarbij te helpen. De eerste benadering is eenvoudiger, maar plug-ins bevatten vaak veel meer functies, zoals je zou verwachten. Laten we de benadering van de plug-in bekijken om te laten zien wat deze functies zijn.

1. Gebruik de plug-in Kaarten Marker Pro

Gebruik Map Maker Pro

De plug-in Kaarten Marker Pro is een alles-in-één premiumoplossing voor het toevoegen van kaarten aan WordPress. Het wordt geleverd met tientallen geavanceerde functies, zoals waarmee u kaarten van meerdere afdelingen kunt bekijken en een vrijwel onbeperkt aantal markeringen aan uw kaarten kunt toevoegen en ze kunt ordenen. Bovendien kunnen bezoekers de soorten markeringen filteren die ze op uw kaarten willen zien.

Andere leuke dingen die u kunt doen met deze plug-in, is het toevoegen van afstands- en route-informatie tussen markeringen. U kunt zelfs uw eigen locatie in realtime delen via uw websitekaart, als u daartoe geneigd bent. Het opzetten van de plug-in kan even duren, gezien de vele functies die deze biedt. 

Het is echter niet zo moeilijk als u zich misschien kunt voorstellen. 

Om te beginnen, configureert en activeert u de plug-in zoals u dat ook zou doen. Als je nieuw bent bij WordPress, zoek het dan uit Hoe maak je een plugin in WordPress installeren

Zodra de plug-in klaar is, moet u een nieuwe kaart of laag toevoegen, wat u vanaf het tabblad kunt doen Maps Marker Pro> Voeg een nieuwe laag toe. Stel hier een naam in die u kunt herkennen voor uw laag en voer de locatie in die u wilt weergeven, net zoals u zou doen met elke andere online kaarttool:

Een andere nouvelle couche

Nu kunt u het formaat en het zoomniveau dat u als standaard wilt instellen, aanpassen met behulp van het linkermenu. Er is ook een optie genaamd Markeringsclustering , die een pictogram met het aantal markeringen in een gebied zal weergeven als u te ver inzoomt, zoals in het onderstaande voorbeeld:

Geef een markering weer

de optie Zoek markeringen, anderzijds is vrij expliciet. Het kan handig zijn als u extra informatie over uw markeringen wilt opnemen:

Lijst met markeringen

Scroll nu naar beneden en zoek de optie « Voeg nieuwe marker toe op deze laag« . Op het volgende scherm kun je een naam en locatie voor je marker definiëren met dezelfde kaart als de vorige.

Ontdek ook Hoe te comprimeren en afbeeldingen verkleinen op WordPress

U kunt ook een pictogram kiezen en pop-uptekst voor uw marker instellen. Dit wordt weergegeven wanneer bezoekers op de markering zelf klikken, of deze selecteren in een lijst als u ervoor heeft gekozen deze op te nemen.

Vergeet in ieder geval niet op de knop te drukken publiceren als je eenmaal klaar bent. Nadat je een paar markeringen hebt toegevoegd, zou je eerste laag er als volgt uit moeten zien:

Voorbeeld van een laag op een blok

Als u klaar bent om uw nieuwe interactieve kaart aan een van uw pagina's toe te voegen, moet u een shortcodes. Scrol naar de bovenkant van het tabblad Laag bewerken  en zoek zijn bijbehorende ID:

Bewaar kaart-ID's

Plaats nu de shortcode [mapsmarker layer = "X"] in uw bericht of pagina. Vergeet niet de tijdelijke aanduiding te vervangen  echter vooraf door de ID van uw "laag".

Uw kaart zou nu operationeel moeten zijn op uw website! Wat nog belangrijker is, u of iemand anders in uw team kan het op elk gewenst moment bewerken en nieuwe markeringen toevoegen, zonder uw dashboard te verlaten.

2. Met behulp van de ingebouwde insluitingsfunctie van Google Map

Google Maps heeft niet echt een introductie nodig - het is een service waarmee u kaarten van over de hele wereld kunt extraheren om plaatsen met andere mensen te delen, adressen te vinden en zelfs te delen waar u bent. Als het om websites gaat, zijn er tal van manieren waarop u Google Maps in uw pagina's kunt insluiten. Bewaar kaarten met google map

De meeste kaarten bieden echter een beperkte hoeveelheid interactiviteit. Ze stellen je in staat er doorheen te navigeren, in te zoomen, uit te stappen en je weergave te veranderen, maar niet meer.

Het feit is dat Google Maps veel meer functies biedt dan eenvoudige kaarten. U kunt bijvoorbeeld ook meerdere markeringen toevoegen, afstanden meten en routebeschrijvingen opnemen in uw kaarten. Ga naar om deze functies te proberen Google My Maps en klik op de knop  + Maak een nieuwe kaart  :

Maak een kaart op Google Map

Stel op het volgende scherm een ​​titel in voor uw kaart en de eerste laag, waarop we zullen voortbouwen. Zoek nu de locatie die u wilt delen met behulp van de Google Map-zoekbalk bovenaan het scherm:

Nieuwe kaart en google map-locatie

Terwijl u inzoomt, kunt u het markeringssymbool boven aan het scherm gebruiken om locaties op uw kaart te markeren. Klik gewoon waar u uw markering wilt plaatsen en stel er een naam en pictogram voor in:

Voeg een markering toe aan uw nieuwe kaart.

Zodra u meerdere markeringen hebt, kunt u lijnen ertussen trekken om de afstanden weer te geven:

Geef een afstand tussen twee punten op de kaart weer

Als je kaart klaar is, klik je op de knop Delen in het menu aan de linkerkant. Wijzig daar de toegangsinstellingen  de privaat  à publiek :

Definieer kaarttoegang

U kunt ook teamleden uitnodigen om hun e-mails te gebruiken, zodat ze onmiddellijk toegang hebben tot de kaart:

Kaart voor samenwerking met partners

In ieder geval moet u uw nieuwe kaart altijd insluiten op uw website. U kunt dit doen door op het pictogram met de drie stippen naast uw kaarttitel te klikken en op de optie te klikken Sluit deze kaart in  :

Kaart insluitenNu kunt u de insluitcode op uw pagina's kopiëren en plakken. Uw nieuwe kaart zal verschijnen waar u deze ook plaatst. Bovendien kunnen uw collega's het bewerken en indien nodig nieuwe markeringen toevoegen via Google Maps.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. Ultieme wiskunde Captcha

Ultimate Math Captcha is een WordPress Plugin 100% effectieve captcha-premie. Het maakt het mogelijk om een ​​wiskundige captcha toe te voegen aan de vormen WordPress login, registratie, wachtwoordherstel, opmerkingen, WooCommerce, Easy Digital Downloads en aux vormen van bbPress.Ultieme wiskundige captcha WordPress-plug-in

De functies omvatten: eenvoudige installatie en configuratie, captcha aan veel toevoegen vormen, ondersteuning voor meerdere Math-captcha's op dezelfde pagina, aanpassing van foutmeldingen en vele andere.

Downloaden | demonstratieweb hosting

2. PayPal-standaard betalingsgateway voor Ninja-formulieren

Met PayPal Standard Gateway for Ninja Forms kunt u formulieren maken die naadloos integreren met de PayPal-betalingsgateway. U kunt gepersonaliseerde bestelformulieren maken en betalingen ontvangen met standaard Paypal-accounts.

Paypal standaard betalingsgateway voor ninja-formulieren

De belangrijkste kenmerken zijn: eenvoudige en snelle integratie, IPN-integratie, de mogelijkheid om de PayPal-gateway op individuele formulieren te activeren / deactiveren, ondersteuning voor regelmatige betalingen, enz.

Downloaden | demonstratie |  web hosting

3. Gravity Forms - List & Edit

met deze WordPress Plugin premium, is het mogelijk om ingevoerde gegevens in de formulieren van uw website te wijzigen of te verwijderen. Een functie die erg ontbreekt in de Gravity Forms-plug-in, daarom is deze extensie gemaakt.Lijst met zwaartekrachtformulieren bewerk WordPress-plug-ins tabellen invoegen grafische site blogformulier

Onder de functies zullen we onder andere vermelden: de mbewerken en opslaan van de opgenomen gegevens, deonderdrukking van de ingevoerde gegevens, dewijziging en verwijdering van reeds gepubliceerde artikelen, de iPerfecte integratie met jQuery Datatables-plug-ins en Gravity-Forms, deondersteuning van voorwaardelijke logica, seenvoudig en snel te installeren, en nog veel meer.

Downloaden demonstratie | web hosting

Aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

Conclusie

Alstublieft ! Dat is het voor deze tutorial, ik hoop dat je hiermee interactieve kaarten in WordPress kunt maken. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken

U kunt echter ook overleggen onze middelen, als u meer elementen nodig heeft om uw projecten voor het maken van internetsites uit te voeren, raadpleeg dan onze gids op Creatie van WordPress blogs.

Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.

...