API-nøgle til Google Maps: Sådan aktiverer du det på din webshop

Skrevet af Kasper Tang Højriis & Emil Øgaard
Udgivet
Længde
5 min.

I juni 2018 blev Google Maps til en betalingsservice. Det betyder, at hvis du skal have et Google Maps-kort på din hjemmeside, er det nødvendigt for dig at oprette en API-nøgle til Google Maps.

I denne guide vil vi vise dig, hvordan:

  1. du opretter en betalingskonto på Google Cloud Platform.
  2. du aktiverer de 4 API’er for at få et Google Maps-kort.
  3. du opretter selve API-nøglen.

Det kan være unødigt indviklet at aktivere Google API’er og oprette en API-nøgle. Derfor fokuserer denne guide på den mest simple fremgangsmåde, så du kan tilbyde Google Maps til dine kunder på din hjemmeside.

BEMÆRK: 

  • I denne guide aktiveres 4 API’er, som udgør det almindelige Google Maps-kort, der ofte findes på hjemmesider. Dog er det også muligt at tilføje flere eller andre API’er til sin API-nøgle, hvis det ønskes.
  • Du modtager hver måned 200$ af Google. Herefter koster det 2$ pr. 1000. visning.

1. Opret en betalingskonto på Google Cloud Platform

Før du kan aktivere de 4 API’er og oprette en API-nøgle, skal du have oprettet en betalingskonto på Google Cloud Platform.

Trin 1. – Log ind

Det første, du skal gøre, er at logge på din Google-konto, hvis du ikke allerede er det.

Trin 2. – Find integrationen til Cloud Console

Gå til siden https://developers.google.com/maps/documentation/javascript/get-api-key.

Du er nu på siden “Using API Keys”.

Under “Before you begin”-sektionen skal du klikke linket “Set up in Cloud Console”.

Trin 3. – Opret et nyt projekt

Nu burde du være på siden “Setting up in the Google Cloud Console”.

Under “Creating a project”-sektionen skal du klikke på ”Create new project”-knappen.

Trin 4. – Udfyld felterne og tryk CREATE

Nu burde du være på siden “New Project”.

Udfyld felterne.

Klik på ”CREATE”-knappen, når felterne er udfyldt.

BEMÆRK: 

  • Husk at skrive et beskrivende “Project name”, da dette ikke kan ændres i fremtiden.
  • Udfyld derefter ”Organization” og “Location”.
  • “Organization” kan heller ikke ændres i fremtiden.
  • “Organization” vil kun fremstå, hvis din Google-konto er en del af en organisation. Hvis den ikke fremstår, skal du nøjes med at udfylde ”Location”.

Trin 5. – Gå til Console

Gå tilbage til siden “Setting up in the Google Cloud Console” (se trin 3).

Klik på ”Go to Console”-knappen.

Trin 6. – Lav en bruger til fakturering

Du bliver nu bedt om at aktivere en Billing Account, som forbindes til dit projekt.

Klik på “CREATE BILLING ACCOUNT”.

Trin 7. – Udfyld oplysninger til fakturering

Du skal nu udfylde de påkrævede informationer for at oprette en Billing Account. Til at starte med skal du opgive land samt acceptere Googles Terms of Service.

Trin 8. – Begynd din gratis prøveperiode

Herefter skal du udfylde nogle yderligere informationer inkl. kort-informationer.

Når de er udfyldt, skal du klikke på ”START MY FREE TRIAL”-knappen.

BEMÆRK:

  • ”START MY FREE TRIAL” henviser til, at du ved oprettelsen af en Billing Account modtager 300$ til Googles API-services.

2. Aktivér 4 API’er

Nu hvor du har fået oprettet en konto på Google Cloud Platform, kan du gå videre med at aktivere de 4 API’er, du skal bruge for at tilføje det almindelige Google Maps-kort.

Trin 1. – Gå til Google Maps-platformen

Gå igen tilbage til siden “Setting up in the Google Cloud Console” (se trin 3 i tidligere afsnit).

Scroll ned til “Viewing enabled APIs”.

Klik på knappen med “Go to Google Maps Platform page”.

Trin 2. – Klik på dit projekt

Du er nu på siden “Google Maps Platform – APIs”. Her kan du se dit projekt, som du oprettede tidligere.
Klik på projektet.

Trin 3. – Find dine 4 API’er

Du burde nu være på siden “Google Maps Platform – Maps APIs and Services”. Her kan du se en samling af alle Google Maps-relaterede API’er.

De 4 API’er, du skal bruge, er: Places API, Maps JavaScript API, Maps Embed API og Maps Static API.

Trin 4. – Aktivér dine API’er

Klik på hver af de 4 API’er, og aktivér dem en efter en ved at trykke på “ENABLE”.

Det kan være en fordel at åbne hver API i forskellige faner for at gøre det mere overskueligt.

3. Opret API-nøglen til Google Maps

Trin 1. – Gå ind på Credentials

Under “Google Maps Platform – APIs” (se trin 2 i tidligere afsnit) kan du nu se, hvilke API’er du har aktiveret i dit projekt.

Klik nu på ”Credentials”.

Trin 2. – Gå ind på Credentials in APIs & Services

Klik på linket “Credentials in APIs & Services”.

 

Trin 3. – Generér din API-nøgle

Nu burde du være på siden “APIs & Services – Credentials”.

Klik på ”+ Create Credentials” for at få en dropdown-menu, og klik på “API key”.

Trin 4. – Begræns din API-nøgle

Du har nu genereret en API-nøgle, som kan kalde op til de API’er, du aktiverede i trin 3 og 4 i det tidligere afsnit. Du skal nu vælge, om du vil begrænse din API-nøgle.

I Salecto mener vi, at du som minimum bør begrænse din API- nøgle, så du undgår misbrug på din regning, fordi den udelukkende kun kan bruges på domæner, du ejer.

Klik ”RESTRICT KEY”.

Trin 5. – Giv API-nøglen et beskrivende navn

Du kan med fordel give nøglen et beskrivende navn.
Under “Key restrictions”-sektionen skal du vinge af ved ”HTTP referrers (web sites)”.

Trin 6. – Tilføj domæner til din begrænsninger

For at begrænse din API-nøgle til udelukkende dine domæner, skal du under “Website restrictions” tilføje dit/dine domæner i dette format:

  • *.minhjemmeside.dk/*
  • *.minhjemmeside.com/*
  • *.stag*.salecto.dk/*
  • *.stag*.salecto.com/*

BEMÆRK: 

  • Asterisk-tegnet (*) vil sikre, at API-nøglen også virker på alle subdomæner. Hvis du er ejer af det samme domæne med både .dk, .com, .no, osv., skal de også tilføjes.
  • Har du et staging miljø, så tilføj også det/dem (igen både .dk og .com)

Trin 7. – Kopier dine API-nøgler

Nu er din nøgle begrænset til dine domæner.

Til sidst kopierer du din API-nøgle og videregiver den til webshopudbyder, så vi kan implementere den på din hjemmeside.

Tak for interessen.

Jeg håber, at jeg har vakt din interesse. Hvis du vil vide mere omkring API-nøgler til Google, er du velkommen til at skrive til [email protected]

Kasper Tang Højriis
Product Developer