Wil je op je website laten zien waar iets zich bevindt? Bijvoorbeeld waar je kantoor zit, waar een evenement plaatsvindt, of waar je lidorganisaties gevestigd zijn? Dan is een kaart op je website de ideale oplossing.
Veel verenigingen en goede doelen gebruiken kaarten om hun bereik te tonen. Denk aan een overzicht van alle aangesloten lokale afdelingen. Of een kaart op een pagina over lokale bijeenkomsten. Bezoekers zien dan in één oogopslag waar ze naartoe kunnen.
Google Maps koppelen aan Procurios
Google Maps is een bekende en betrouwbare kaartendienst. Door Google Maps te koppelen aan Procurios, toon je automatisch je relaties op een interactieve kaart op je website. Wanneer je gegevens in het CRM wijzigt, werkt de kaart dit direct bij.
Dit artikel legt uit hoe je de koppeling instelt. Voor de instellingen binnen Google Cloud Console geven we de belangrijkste stappen. Let op: Google werkt regelmatig dingen bij in hun omgeving. Kom je iets anders tegen dan beschreven? Kijk dan op de support-pagina van Google voor de meest actuele informatie.
Bereid de koppelingen voor in Google Cloud Console
Activeer (enable) de juiste API's
Zijn er nog geen API's enabled onder Enabled APIs & Services? Activeer dan via 'Enable APIs and services' de Maps Javascript API en Geocoding API.
Om API's te kunnen inschakelen dien je in ieder geval een project te hebben in Google Cloud Console. Indien nodig wordt je hier vanzelf op gewezen binnen je Google Cloud Console.
Maak 2 API sleutels aan in Google Cloud Console
Maak onder APIs & Services > Credentials twee API sleutels aan (Create credentials):
- Voor het tonen van de Google Maps-kaart
- Voor het ophalen van adrescoördinaten van je relaties
1. Voor het tonen van de Google Maps-kaart
Voeg een sleutel toe voor het tonen van de Google Maps-kaart. Hou daarbij de volgende instellingen aan:
Name: geef een herkenbare naam aan deze API sleutel, bijvoorbeeld 'Google Maps kaart tonen'.
Application restrictions: kies hier voor het type 'Websites'. Geef vervolgens aan welke websites gebruik mogen maken van de API sleutel. Hiermee voorkom je dat een derde partij zonder toestemming hiervoor óók gebruik maakt van deze functionaliteit. (De API sleutel is namelijk in code terug te vinden.) Wanneer je geen restricties hebt ingesteld, kan dit veroorzaken dat jij mogelijk (meer) moet betalen door een hoger verbruik.
API restrictions: kies voor type 'Maps Javascript API'
Tip: Voeg ook de domeinnaam van je Procurios-omgeving toe bij de toegestane websites: jouworganisatie.procurios.cloud
Zo zorg je ervoor dat je ook voorbeeldkaartjes kunt zien in de backend.
2. Voor het ophalen van adrescoördinaten
Met deze sleutel kan Procurios de coördinaten van adressen (van je relaties) opvragen bij Google. Hou bij het aanamken de volgende instellingen aan:
Name: geef een herkenbare naam aan deze API sleutel, bijvoorbeeld 'Adrescoördinaten ophalen'.
Application restrictions: kies hier voor het type 'IP addresses' (IP-adressen). Geef vervolgens aan welk IP-adres gebruik mogen maken van de API sleutel. Hier moet je het IP-adres van Procurios opgeven, zodat alleen Procurios toegang krijgt tot deze service en niet een derde partij. Het IP-adres dat je hier moet invoeren is: 213.193.247.0/24
API restrictions: kies voor type 'Geocoding API'
Je kunt de API sleutel voor adrescoördinaten ook gebruiken voor een afstandsfilter. Bezoekers kunnen dan zoeken naar relaties binnen een bepaalde straal van hun postcode. Handig voor publieke relatielijsten! Lees meer in het artikel 'Zoeken op afstand in publieke relatielijsten'.
Voeg de API sleutels toe in het Procurios Platform
Kopieer de API sleutels
Vanuit de Google Cloud Console-omgeving kun je de API-key tonen ('Show key') en vervolgens kopiëren.
Een API-key is een lange reeks met voornamelijk cijfers en letters en ziet er ongeveer als volgt uit.
Ga naar het Procurios Platform
Ga nu binnen Procurios naar Platform > Google Maps > Manage API keys.
Hier moeten de twee sleutels worden weergegeven.
Voeg een nieuwe API sleutel toe
Klik op 'Voeg een nieuwe API sleutel toe'. Je krijgt een scherm met de volgende instellingen:
1. Plak de sleutel
Plak bij Sleutel de zojuist gekopieerde API sleutel.
2. Kies de domeinen waar de API sleutel voor bedoeld is
Bij het aanmaken of bewerken van de API sleutel in het Procurios Platform kun je domeinen selecteren. Het is belangrijk dat je dit correct instelt.
2.1. Bij de API sleutel voor het tonen van de Google Maps-kaart
Wanneer je een kaart wilt plaatsen op één van je websites, is het belangrijk dat het domein van deze website geselecteerd wordt bij de API sleutel voor het tonen van de Google Maps-kaart. Hierdoor weet ons platform welke API sleutel gebruikt moet worden om de kaart op te halen.
Tip: Voeg ook de domeinnaam van je Procurios-omgeving toe bij de toegestane websites: jouworganisatie.procurios.cloud
Zo zorg je ervoor dat je ook voorbeeldkaartjes kunt zien in de backend.
Heb je meerdere websites waarop je de kaart toont? Dan kun je dezelfde API sleutel hiervoor gebruiken. Het is wel belangrijk dat je alle domeinnamen zowel bij Procurios als bij Google Cloud Console goed instelt.
Wil je graag voor iedere website een aparte API sleutel? Dat kan ook. Stel dan bij iedere API sleutel de juiste domeinnaam in; zowel bij de websiterestricties in Google Cloud Console als bij Domeinen in Procurios.
2.2. Bij de API sleutel voor het tonen van de domeinen
Bij de API-sleutel voor het opvragen van de adrescoördinaten stel je geen domeinen in.
Let op: stel maximaal 1 API-key in zonder domeinnamen, namelijk de API-key voor het ophalen van adrescoördinaten.
3. Vertel wie de eigenaar is
Voeg informatie toe over het account waar de API key bij hoort, zodat je collega's of opvolgers dit later gemakkelijk kunnen terugvinden wanneer ze instellingen van de API key in Google Cloud Console moeten wijzigen.
4. Vertel wat de projectnaam is
Voeg informatie toe over het project waarbinnen de API key is terug te vinden, zodat je collega's of opvolgers dit later gemakkelijk kunnen terugvinden wanneer ze instellingen van de API key in Google Cloud Console moeten wijzigen.
5. Toevoegen maar!
Klik op 'Voeg toe' om de API sleutel op te slaan en te activeren binnen jouw Procurios Platform. Herhaal de bovenstaande stappen voor de tweede API sleutel.
Richt een kaart in
- Ga naar Platform > Google Maps > Map Overview
- Maak een kaart (map) aan en geef deze een duidelijke titel waarvoor je deze kaart wilt gebruiken. Bijvoorbeeld: 'Regio-coördinatoren'.
Binnen de instellingen kun je verder het 'gedrag' van de kaart bepalen. Dit zijn de functies die Google als opties aanbiedt. 'Speel' hiermee tot je het gewenste resultaat van je kaart ziet.
Publiceer de kaart op je site
- Ga nu naar CMS en open de site en de pagina waarop je de kaart wilt tonen. (Zonodig maak je hiervoor een nieuwe pagina aan)
- Maak een nieuw artikel aan op deze pagina. Kies artikeltype 'Relaties op een kaart'.
- Hier selecteer je de kaart de je hierboven hebt aangemaakt.
- Wat belangrijk is, is dat je hier, of in de hierboven beschreven kaart-instellingen, een Relatieselectie opgeeft van de relaties die op de kaart getoond moeten worden.
- Alle andere opties zijn optioneel en slechts bedoeld om het hierboven ingestelde 'kaart-gedrag' te overrulen.
Problemen oplossen
Deze melding duidt erop dat de instellingen in Google Cloud Console van deze API-key niet goed staan. Dit is niet iets wat zich binnen het Procurios Platform afspeelt. Dit zit in de instellingen van het Google Maps-kaartje.
Klik hier om de documentatie van Google Cloud Console te bekijken. Controleer met name ook of de instellingen rondom 'Billing' correct staan ingesteld. Mocht je meer willen weten rondom billing dan kan je dit artikel binnen de developers portal van Google er op nalezen.
Je krijgt de melding:
Niet gelukt om coördinaten te vinden met gebruik van API key ### (verzoek geweigerd). Reden: 'API keys with referer restrictions cannot be used with this API.'
- Controleer via Procurios > Platform > Google Maps > Manage API keys of de API sleutel die bedoeld is voor het ophalen van adrescoördinaten niet per ongeluk een Domein heeft meegekregen in het Procurios Platform. Bij deze API sleutel is het niet de bedoeling dat er een domein wordt toegevoegd.
- Controleer via Procurios > Platform > Google Maps > Manage API keys of er niet per ongeluk meerdere API sleutels staan waarbij geen domeinen staan ingesteld. Er mag maximaal 1 API sleutel beschikbaar zijn zonder domeinen. Zijn dit er meerdere? Dan selecteert ons platform mogelijk de verkeerde API sleutel, bijvoorbeeld één waarbij de restrictie-instellingen niet passen bij de taak (het ophalen van adrescoördinaten).
- Controleer of de instellingen van deze API key in Google Cloud Console correct zijn. Staat bijvoorbeeld het juiste IP-adres van Procurios ingesteld bij Application restrictions? En staat de API restriction ingesteld op 'Geocoding API'?
Je krijgt bij kaarten in de beheeromgeving van Procurios de melding: 'Oeps! Er is iets misgegaan.Google Maps is niet correct geladen op deze pagina. Zie de JavaScript-console voor technische details.'
- Controleer via Procurios > Platform > Google Maps > Manage API keys of de API sleutel die bedoeld is voor het tonen van de kaart het domein van de backend heeft ingesteld. Dit herken je vaak aan
jouworganisatie.procurios.cloud - Controleer via Google Cloud Console of de API sleutel die bedoeld is voor het tonen van de kaart het domein van de backend heeft ingesteld bij de Website restricties.
Voeg de domeinnaam op beide plekken toe.