Een kaart weergeven op je website

Er zijn een aantal opties om een kaart weer te geven op je website, een aantal manieren zijn echter handiger en eenvoudiger in te zetten dan andere. Laten we in deze blog post een kijkje nemen hoe dit in zijn werk gaat, en welke haken en ogen hieraan vast kunnen zitten.

Een aantal aanbieders van kaarten zullen vast wel bekend zijn, veruit de meest gebruikte is Google Maps. In het verleden was het mogelijk om eenvoudig op je website een interactieve kaart neer te zetten van Google Maps met hierin de mogelijkheid om je bedrijf of locatie te vermelden. En met een druk op de knop gelijk de mogelijkheid te geven om je direct te begeleiden. Helaas is dit niet meer het geval, en dien je voor het gebruik van Google Maps nu te betalen. 

Hierdoor zijn een hoop mensen naar alternatieven op zoek gegaan. We leggen in deze blog post de focus op het gebruik van het Content Management Systeem WordPress, en het weergeven van de kaart op bijvoorbeeld je contact pagina. 

We hebben een aantal verschillende WordPress plugins uitgetest, en de volgende plugin is hier naar onze mening bovenuit gekomen die we aanraden om te gebruiken: 

WP Go Maps (formerly WP Google Maps)

Met deze plugin kan je gratis gebruikmaken van de hoofdfunctionaliteit, en ervoor zorgen dat jouw locatie netjes wordt weergegeven op je contact pagina. Het is alsnog wel verstandig om even het volledige adres ook hieronder te zetten. Zodat gebruikers dit eenvoudig kunnen kopieren en plakken in het door hun gekozen navigatieprogramma. 

WP Go Maps (voorheen WP Google Maps) is met miljoenen downloads de absolute marktleider onder de WordPress-kaartplugins. Waar de plugin vroeger puur om Google Maps draaide, is het inmiddels uitgegroeid tot een universeel platform waarmee je ook volledig gratis kaarten kunt publiceren.

Sinds de nieuwste updates maakt de plugin standaard gebruik van een "Zero Cost" mapping engine preset (via OpenLayers/Leaflet en OpenFreeMap), waardoor je direct een werkende kaart hebt zonder API-keys of ingewikkelde accounts.

De Belangrijke Functies

De kracht van WP Go Maps zit in de visuele editor. Je hoeft geen code aan te raken; je bouwt de kaart alsof je in een gewone page builder werkt. Wel is voor van onderstaande functionaliteit de pro versie vereist van de plugin zelf. 

• Geocoding engine (Adres naar speld): Je hoeft geen ingewikkelde GPS-coördinaten op te zoeken. Je typt gewoon "Hoofdstraat 12, Amsterdam" in, en de plugin zet de marker (speld) automatisch op de juiste plek.

• Aangepaste Markers & Info-bubbels: Je kunt de standaard rode speld vervangen door je eigen bedrijfslogo of een icoon naar keuze. Wanneer een bezoeker op de speld klikt, opent er een Infowindow (pop-up) waarin je tekst, openingstijden, een knop, afbeeldingen of zelfs een YouTube-video kunt tonen.

• Store Locator (Winkelzoeker): Heb je meerdere vestigingen of verkooppunten? Bezoekers kunnen hun eigen postcode of stad invoeren en filteren (bijvoorbeeld binnen een straal van 10 km) om de dichtstbijzijnde locatie te vinden.

• Vormen tekenen (Polygons & Polylines): Handig voor bezorgdiensten of makelaars. Je kunt handmatig cirkels of vlakken op de kaart tekenen om bijvoorbeeld een bezorgregio of werkgebied aan te geven.

• Ingebouwde routes en routebeschrijvingen: Bezoekers kunnen rechtstreeks op jouw website hun startpunt invoeren om een complete routebeschrijving (voor de auto, fiets of te voet) te genereren.

Kaartstijlen en Aanbieders waar je eenvoudig uit kiest

Binnen de instellingen van WP Go Maps kun je met één klik wisselen tussen verschillende systemen en visuele stijlen (zogeheten Tile Servers). 

1. De Gratis Opties (Geen creditcard nodig)

Als je kiest voor de OpenLayers of Leaflet engine, krijg je gratis toegang tot verschillende kaartstijlen die direct werken:

• Standard OpenStreetMap: De bekende, gedetailleerde kaart die door de community wordt bijgehouden.

• OpenFreeMap (Liberty & Bright): Zeer strakke, moderne en minimalistische vector-kaarten die perfect passen bij zakelijke websites.

• Specialistische kaarten: Je kunt ook kiezen voor specifieke layouts zoals CyclOSM (volledig gericht op fietspaden) of de Humanitarian kaartstijl.

2. Premium Design Opties (Vaak met ruime gratis opstart)

Wil je echt iets bijzonders dat naadloos aansluit bij de kleuren van je website? Dan kun je binnen de plugin koppelen met alternatieve ontwerpplatformen:

• Stadia Maps: Biedt prachtige kant-en-klare designthema's zoals Alidade Smooth (heel rustig en modern) en speciale Dark Mode kaarten.

• MapTiler: Geeft je toegang tot meer dan 20 verschillende stijlen, waaronder gedetailleerde satellietbeelden, topografische kaarten (voor outdoor/wandelen) en pastelkleurige achtergronden.

3. De Google Maps Engine (De klassieker)

Kies je er toch voor om je Google API-key te koppelen, dan ontgrendel je de bekende vier kaarttypen van Google: Roadmap (standaard), Terrain (terrein), Satellite (satelliet) en Hybrid.

• Snazzy Maps koppeling: uniek aan de Google-koppeling in WP Go Maps is dat deze direct verbinding maakt met de Snazzy Maps bibliotheek. Hierin staan duizenden gratis, door de community gemaakte designs (zoals volledig zwart-wit, ultra-minimalistisch of retro-stijlen) die je met één klik op je Google-kaart toepast.

Kortom: Met WP Go Maps activeer je in een handomdraai de gratis Zero Cost Mapping-variant voor een simpele contactpagina, maar kun je net zo makkelijk opschalen naar een geavanceerde winkelzoeker in je eigen huisstijl. Probeer het nu op je eigen WordPress hosting!