Unlimited Google Maps voor Elementor – Oneindig goed!

Het is nog niet zo gek lang geleden dat ik een uitgebreid artikel schreef, waarin ik verschillende zogenaamde ‘shop finders’ met elkaar vergeleek. Waarom, nog geen acht maanden later, opnieuw een artikel over hetzelfde onderwerp? Eigenlijk om een heel eenvoudige reden: Op dat moment kende ik ‘Unlimited Google Maps’ van Unlimited Elements nog niet.

Even voor alle duidelijkheid. Unlimited Google Maps is een widget in Unlimited Elements, het is geen apart product. Zoals ik echter in mijn eerste artikel over Unlimited Elements echter al heb aangegeven, één van de bijzondere dingen is bijvoorbeeld, dat Unlimited Elements niet zomaar widgets installeert: Iedere widget die je wilt gebruiken, installeer je afzonderlijk (met een enkele klik in het overzicht, dus er is niets ingewikkelds aan), waardoor je jouw installatie van WordPress niet overbelast met widgets die je toch niet gebruikt.

Een tweede bijzonderheid is dat deze widgets aanpasbaar zijn. Maar daar ga ik het zo over hebben.

Wat was ook al weer een ‘shop finder’ of een ‘store locator’?

Het type plugin waar we het over hebben wordt meestal aangeduid als een ‘shop finder’ of een ‘store locator’, wat op zich natuurlijk een belachelijke naam is. Alsof je kaarten alleen zou kunnen gebruiken om winkels te vinden. Maar het idee is wel duidelijk. Met de plugin plaats je meerdere ‘pins’ op een kaart, om verschillende locaties van… ja van wat dan ook aan te geven.

Dat kunnen de vestigingen van je winkels zijn, de mooiste monumenten in Nederland of de locaties waar jij als echte vogelaar de blauwbilgorgel zijn knezidon hebt zien knoesteren. Kortom, het gaat veel verder dan alleen de locaties van je winkels.

En in de naamgeving van de widget komt dat ook duidelijk naar voren. Het is een unlimited Google Maps widget. En aan het einde van dit blogartikel zal je ook begrijpen waarom!

Waarom niet de Elementor Google Maps Widget?

Je zal je je afvragen, waarom ik niet de standaard Google Maps widget gebruik, die sowieso al met Elementor mee komt. Om een heel eenvoudige reden.

Wanneer ik een ‘shopfinder’ heb, dan wil ik meerdere pins op de kaart kunnen zetten. Met de standaard Google Maps widget kan ik exact één locatie op de kaart zetten. Dat is leuk om te laten zien, waar mijn bedrijf is gevestigd, maar het is wat minder nuttig voor het tonen van verschillende locaties.

‘Shop finders’ – om die term nog maar even te blijven gebruiken- gaan er juist vanuit, dat er meerdere pins op een kaart geplaatst worden en -meestal ook- dat je deze op kan zoeken door ze uit een lijst te kiezen of op afstand te zoeken.

Een Google Maps API account

Een belangrijk verschil tussen het gebruik van Google Maps voor één enkele locatie en het gebruik voor meerdere pins zoals in het voorbeeld van ons artikel, is dat je bij meerdere opvragingen in een korte tijd een Google Maps API key moet hebben. En daarvoor heb je een account bij Google Cloud Services nodig.

Denk erom dat je om deze key ook daadwerkelijk te activeren je ook een betaalmethode in moet stellen bij Google. In principe betaal je namelijk voor het gebruik van Google Maps. Eén troost: Waarschijnlijk zal je nooit aan daadwerkelijk betalen toekomen, omdat je voor je complete Google Cloud Services account iedere maand ‘gratis’ 200 euro kan besteden. Ga je hier overheen, dan ga je pas betalen. En je moet wel honderdduizenden hits per dag op je pagina met de kaart hebben, wil je over die 200 euro heenkomen, als je geen verdere Google Cloud Services gebruikt.

Die Google Maps API key geef je in bij de instellingen van de Unlimited Elements settings. En daarna kan je de widget gebruiken.

De Unlimited Google Maps Widget

In grote lijnen ziet de widget er in eerste instantie uit als de Google Maps in de plugin van Elfsight, zoals besproken in het eerder genoemde artikel. Aan de linker- of rechterkant (of aan geen van beide kanten, als je dat zo wenst) heb je een lijst met de adressen / locaties die je op de map hebt gepint. Klik je een locatie, dan wordt de pin van de locatie getoond.

Het is mogelijk om iedere locatie een eigen ‘pin’ te geven, of bepaalde pins voor specifieke groepen van locaties te gebruiken.

Op het moment dat je uitzoomt op de kaart en daardoor de pins toch wel heel dicht bij elkaar in de buurt komen, is het mogelijk dat je ze automatisch laat clusteren. Dat komt erop neer, dat in plaats van de afzonderlijke pins, een ander type marker wordt getoond, met daarin het aantal pins in dat specifieke gebied.

Per locatie kan je de door jou gewenste gegevens ingeven. Dat kan het adres plus een foto van de locatie zijn, maar je kan hierbij ook denken aan openingstijden, website, telefoonnummer, een link naar een pagina op je website of welke andere informatie dan ook. Dit kan in een venster op de kaart getoond worden, wanneer iemand klikt op een pin of hier overheen gaat met de muis, afhankelijk van de instellingen.

Tenslotte is het ook nog eens mogelijk om de verschillende locaties te groeperen op categorie. Zo’n categorie kan een geografisch gebied zijn (bijvoorbeeld ‘Nederland’), maar het kan ook gebaseerd zijn op bepaalde kenmerken.

Stel bijvoorbeeld, dat ik een kaart zou hebben met alle bezienswaardigheden in een regio. Ik zou dan een categorie ‘Musea’, een categorie ‘Recreatie’ en een categorie ‘Natuurgebied’ kunnen hebben.

De widget zal bij een categorie automatisch de mogelijkheid geven om dat type pins te tonen of te verbergen op de kaart.

Kortom, een widget met heel veel mogelijkheden. Maar maakt dat het nu ‘unlimited’… wacht maar tot je verder leest.

Eigen kleurinstellingen

Google Maps hebben een heel kenmerkende kleurinstelling. En dat vind ik eigenlijk best wel duidelijk. Maar wat, wanneer je de kaart meer bij de kleuren van je site zou willen laten passen? Daar heeft de widget ook een goede oplossing voor. Google heeft namelijk een ‘API’ waarmee je de instellingen van Google Maps aan kan passen voor wat betreft de presentatie. En die instellingen kan je door middel van zogenaamde ‘JSON’ files laden, zodat je kaart er heel anders uit komt te zien.

Nu hoor ik je al denken ‘maar ik begrijp niets van dat hele JSON gedoe’.

Gelukkig hoeft dat ook niet. Op SnazzyMaps.com kan je zelf een stijl maken, of de stijlen die anderen gemaakt hebben kopiëren en in het bedoelde veld van je widget instellingen plakken.

En verder…

Ok, dat zijn natuurlijk aardig wat mogelijkheden, maar het leukste moet nog komen. Zoals ik in mijn artikel over Unlimited Elements al had aangegeven, het is mogelijk zelf de code van de widgets aan te passen.

Dat heb ik bij wijze van een experiment gedaan, en dat valt eigenlijk best wel mee. Binnen een uur had ik de plugin omgebouwd om in plaats van de adressen uit een lijst te lezen die je in moet voeren, de adressen te lezen uit een custom post type met een aantal velden om dit te doen.

Dat is overigens niet iets, wat ik iedereen aan zou bevelen, er komt heel wat programmeren met het template taaltje ‘Twig’ bij kijken, maar het is wel iets wat dus in een relatief korte tijd gedaan kan worden. Heb je een lijst met vestigingen, leden of wat voor andere locatie dan ook, die je zo in kaart wilt brengen, kan je dat op deze manier doen.

Maar… pas op! Don’t overdo it.

Information overload!

Stel, je hebt het prachtige idee opgevat om op een kaart alle verkooppunten van jouw product te laten zien. En -lucky you- jouw product wordt in alle supermarkten van Nederland verkocht. Nu waren er in 2020 volgens het CBS ruim 6100 supermarkten in Nederland.

Ik heb het niet geprobeerd met deze aantallen, maar bij een experimentje met 100 datapunten duurde het toch zo’n 10 seconden voor de kaart zichtbaar was. Er moet behoorlijk wat informatie ingelezen en opgezocht worden online.

Met 61 maal dat aantal gaat dat exponentieel langer worden (dus geen 10 minuten, maar mogelijk al uren), maar bovendien betwijfel ik of je computer (de datapunten worden van Google direct naar jouw computer verzonden) sowieso niet vast zou lopen.

Bovendien, weet je nog, dat je per opvraging moet betalen? Zelfs met 200 euro ‘gratis’ per maand, is de kans dat je er toch overheen zou komen al een stuk waarschijnlijker. Op het moment dat in een maand 1000 mensen je kaart bekijken, heb je ruim 6 miljoen opvragingen gegenereerd. En dat, terwijl ze waarschijnlijk stuk voor stuk alleen geïnteresseerd waren voor de 10 supermarkten op fietsafstand.

Dit punt is dan ook het enige zwakke punt van deze Google Maps widget die ik heb kunnen ontdekken. Bij grote aantallen gegevens gaat het mis, omdat de items direct worden ingelezen bij het laden van de kaart.

Dit is deels te voorkomen. Wanneer ik op adres zoek, dan vraag ik eigenlijk twee dingen van Google. Mijn eerste vraag is ‘wat zijn de coördinaten van Sesamstraat 123 in Halversum’. Daarna krijg ik van Google de coordinaten door, en mijn tweede vraag is ‘He Google, wil je een datapunt tekenen op die kaart met deze coordinaten’.

Die eerste vraag hoef ik natuurlijk maar éénmaal te stellen. Tenzij er een ernstige verschuiving van de continenten plaats zal vinden, zal dat adres in Halversum qua coordinaten ongewijzigd blijven. Door het antwoord op die vraag te cachen, beperk ik al het dataverkeer en zal het proces sneller verlopen.

Maar het is dus geen geschikte oplossing voor werkelijk grote aantallen locaties op een kaart te plaatsen. Maar dat geldt eigenlijk voor de meeste van de plugins die ik in het eerder genoemde artikel heb beschreven ook.

Heb je werkelijk honderden vestigingen, maar heb je die bijvoorbeeld in verschillende landen, is het goed mogelijk om eerst het land uit de database te zoeken, en aan de hand van het resultaat pas de datapunten op de kaart te zetten.

Presentatie aanpassen

Het laatste wat ik nog wil benoemen is de mogelijkheid om de presentatie van de ‘card’ die op de ‘map’ (om even het Nederlands te voorkomen, waar ik twee keer het woord ‘kaart’ zou moeten gebruiken) komt te staan aan te passen. Want ook dat is gewoon een combinatie van HTML en Twig en ik kan dus iedere denkbare layout aan de kaart geven.

Conclusie

In vergelijking met de eerder besproken store locators/ shop finders biedt deze widget toch wel heel veel meer. Eén van de nadelen is echter, dat niet alles zomaar te configureren is, maar er echt geprogrammeerd zal moeten worden, wanneer je het wat anders wilt hebben. Hier hebben we het echter niet over werk van vele uren, maar meestal over ‘kleine klussen’ die in 1-2 uur gedaan kunnen worden, afhankelijk van wat de klant precies wil.

Natuurlijk werkt deze plugin alleen, wanneer je een website hebt met Elementor. Maar wanneer je jouw website door WordXPression laat maken is dat natuurlijk geen probleem.