Stappenplan: een Google Maps API-sleutel maken

Om Google Maps te integreren op je eigen website met onze HubSpot Store Locator-module, heb je een eigen API-sleutel nodig. Dat is een unieke ID die gebruikt wordt om aanvragen die aan je project verbonden zijn te verifiëren, zodat Google een beeld krijgt van het gebruik en de facturering die daarbij hoort. Zo’n ID aanmaken heeft gelukkig niet veel voeten in de aarde.

Waarvoor wordt de API key gebruikt?

Ook de Google Maps API vereist zo’n API-sleutel, die verbonden wordt aan je facturatiegegevens.

Het gebruik van de Google Maps API is in principe betalend, maar in de praktijk hoeft het niet altijd geld te kosten. Google kent per billing account immers automatisch 200 US dollar op maandbasis toe. Dat betekent concreet dat je niets betaalt zolang je minder dan zo’n 25.000 hits genereert per dag. Liggen je noden hoger, dan brengt Google hier wel kosten voor in rekening.

Hier krijg je een gedetailleerd overzicht van de tarieven voor de Google Maps API.

Stappenplan: een Google Maps API-sleutel maken

Je eigen API-sleutel maken voor de Google Maps JavaScript API kan in enkele stappen:

1. Maak een API key aan

Dit kan op twee manieren: ofwel maak je een API key aan via de Google Maps Platform-website, ofwel gebruik je de Google Cloud Platform-console:

Google Cloud Platform console:

• Ga naar de Google Cloud Platform Console.
• Zoek en selecteer je project via het drop-down menu bovenaan in beeld of maak een nieuw project aan waarvoor je een API-sleutel wil toevoegen.
• Klik op de knop van het navigatiemenu links bovenaan en selecteer hier APIs & Services > Credentials.
• Op de Credentials-pagina kies je voor Create credentials > API key.
• In het dialoog venster zie je nu je jouw gloednieuwe API-sleutel.
• Klik nu op Close.

Je nieuwe API-sleutel vind je voortaan terug op de Credentials-pagina onder de header API keys. Denk er wel om dat je deze sleutel eerst nog beperkingen moet opleggen voor je hem kan gebruiken in een productieomgeving.

Google Maps Platform website:
(Het ziet er naar uit dat deze werkwijze vervangen werd door Google Cloud Platform - zie hierboven)

• Surf naar de Google Maps Platform-website..
• Klik op Aan de slag.
• Vink het vakje naast Google Maps aan.
• Selecteer je project uit de lijst in het drop-down menu of maak een nieuw project aan.
• Koppel je project aan een bestaande facturatie-account of maak een nieuwe aan.
• Kopieer je API-sleutel die op het scherm verschijnt.

2. Voeg de API-key toe in de module

Elk verzoek aan de Google Maps API moet een API-sleutel bevatten. In het onderstaande voorbeeld vervang je YOUR_API_KEY door je eigen API-sleutel:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

Voeg de API-key toe aan onze Store Locator HubSpot module, die zorgt ervoor dat API key toegevoegd wordt aan ieder request.

3. Leg beperkingen op aan je API sleutel

Door beperkingen op te leggen aan je API-sleutel zorg je voor extra beveiliging en zorg je ervoor dat alleen geautoriseerde aanvragen worden verricht via je API-sleutel.

Op die manier krijg je geen factuur voor bezoek op andere websites die je API key overnemen.

• Ga naar het Google Cloud Platform Console
• Klik op de keuzelijst van het project en selecteer het project waarvan je de API-sleutel wil beveiligen
• Klik op de menuknop en selecteer API's en services > Referenties
• Op deze pagina klik je op de naam van de API-sleutel die je wil beveiligen
  • Toepassingsbeperking: hiermee zorg je ervoor dat een API-sleutel alleen voor websites (http), webservers (IP) of apps (Android of iOS) geldig is. Je kan maar één beperking selecteren uit deze categorie, gebaseerd op het platform van de API of SDK. Door meerdere sleutels aan te maken en te beperken, kan je om die beperking heen werken
    • Selecteer HTTP-verwijzers (websites)
    • Voeg de verwijzers toe. Kies voor beperken en hernoemen de beperkingen in beide types beperkingen
  • API-beperking: hiermee zorg je ervoor dat alleen (één of meer) API’s of SDK’s van je keuze een API-sleutel kunnen gebruiken. Verzoeken van een API of SDK die niet aan de sleutel gekoppeld zijn mislukken
    • Selecteer Sleutel beperken
    • Klik op API's selecteren en selecteer Maps JavaScript API. Als de Maps JavaScript API niet wordt vermeld, moet je deze eerst nog even inschakelen
    • Klik op Opslaan

Het is aanbevolen om beide beschikbare beperkingen in te stellen voor je een API-sleutel gaat gebruiken.

Voor meer informatie kan je ook terecht op de documentatiepagina van Google (Engels)

Een custom HubSpot Store locator module

Met zo'n API kan je Google Maps integreren op je HubSpot website. Wij hebben een custom module ontwikkeld waarmee je meerdere locaties kan weergeven op je HubSpot wegpagina's:

Koop deze HubSpot-module op de marktplaats »
Naar de documentatie over deze module »