Plan een kennismaking
/ The Digital Hub Academy

Google Maps API aanmaken en koppelen aan WordPress

In deze handleiding leggen we stap voor stap uit hoe je een Google Maps API aanmaakt en koppelt aan WordPress voor gebruik met de Advanced Map widget van JetElements.

Stap 1: Ga naar Google Cloud Platform

  1. Ga naar https://console.cloud.google.com/.
  2. Log in met het Google-account dat je wil gebruiken.
  3. Klik bovenaan op Select a project.
  4. Klik op New Project.
  5. Geef het project een naam (bijvoorbeeld de naam van je website).
  6. Klik op Create.

Stap 2: Activeer de benodigde Google Maps API’s

Voor de Advanced Map widget van JetElements heb je minstens de volgende API’s nodig:

  • Maps JavaScript API
  • Geocoding API

Zo activeer je deze:

  1. Ga in het linkermenu naar APIs & Services → Library.
  2. Zoek naar Maps JavaScript API.
  3. Klik op Enable.
  4. Ga terug naar de Library.
  5. Zoek naar Geocoding API.
  6. Klik opnieuw op Enable.

Stap 3: Een Google Maps API-key aanmaken

  1. Ga naar APIs & Services → Credentials.
  2. Klik op Create Credentials.
  3. Kies API key.
  4. De API-key wordt automatisch aangemaakt.

Kopieer de API-key en bewaar deze tijdelijk in een notitie.

Stap 4: (Aanrader) API-key beveiligen

Om misbruik te voorkomen is het aangeraden om de API-key te beperken tot je website.

  1. Klik in het overzicht op je aangemaakte API-key.
  2. Ga naar Application restrictions.
  3. Kies HTTP referrers (websites).
  4. Voeg je domein toe, bijvoorbeeld:
    https://www.jouwdomein.be/*
  5. Klik op Save.

Stap 5: API-key koppelen aan WordPress (JetElements)

  1. Log in op het WordPress-dashboard.
  2. Ga naar Crocoblock → JetPlugins Settings.
  3. Klik op Integrations.
  4. Zoek de sectie Google Maps.
  5. Plak de Google Maps API-key in het veld Google Map API Key.
  6. De instelling wordt automatisch opgeslagen.

Stap 6: Controle in Elementor

  1. Open een pagina in Elementor.
  2. Voeg de Advanced Map widget van JetElements toe.
  3. Vul een adres of locatie in.
  4. Controleer of de kaart correct wordt weergegeven.

Probleemoplossing

  • Zie je de melding For development purposes only? Controleer of billing is geactiveerd in Google Cloud.
  • Laadt de kaart niet? Controleer of beide API’s geactiveerd zijn.
  • Werkt de kaart lokaal maar niet online? Controleer de domeinrestricties van de API-key.

Klaar

Je Google Maps API is nu correct aangemaakt en gekoppeld aan je WordPress-website. De Advanced Map widget van JetElements kan nu zonder problemen gebruikt worden.

Plan een kennismaking