Indledning
Hvad er Google Maps, og hvad kan det?
Google Maps er en korttjeneste, som gør det muligt visuelt at fremvise lokationer via et interaktivt kort på din hjemmeside. Det kunne f.eks. være din butik – så kunderne præcis ved hvor på gaden, din butik ligger, så de ikke skal lede efter den.
Udover det kan Google Maps også blive benyttet til webshops ift. at fremvise pakkeshop-muligheder, når kunden skal vælge, hvor vedkommende ønsker at afhente sin pakke.
Google Maps kan altså give mange brugbare funktioner til din hjemmeside eller webshop og skabe en bedre brugeroplevelse for kunderne.
Step 1
Klik på billedet for forstørre det
Opret en Google-konto via dette link: https://console.cloud.google.com/
Hvis du har en Google-konto i forvejen, skal du i stedet logge ind. Resten af guiden herunder er dog med udgangspunkt i, at du ikke har en Google-konto, så hvis du logger ind med en allerede eksisterende Google-konto, kan det muligvis se anderledes ud.
Step 2
Klik på billedet for forstørre det
Første gang du logger ind, skal du godkende deres ”Terms of Service”, og herefter kan du gå videre i oprettelsen af din Google Maps API.
Du skal nu oprette et nyt projekt, og det gør du ved at vælge ”Select a project” oppe i den øverste menu ved siden af deres logo.
Herefter åbner der sig en popup, og her skal du vælge ”NEW PROJECT” i det øverste højre hjørne af denne popup.
Step 2.1
Klik på billedet for forstørre det
Vi skal nu navngive dit projekt hos Google Maps, så vi fremadrettet nemt kan finde det igen.
Under ”Project name” i første felt skriver du ”Google Maps API”, og det andet felt lader du blot stå på ”No organization”. Herefter klikker du på ”CREATE”.
Step 3
Klik på billedet for forstørre det
Du lander nu på forsiden igen, som du kender fra Step 2. Nu skal du hen til dit nyoprettede projekt.
Her skal du igen vælge ”Select a project”, som i Step 2 oppe i øverste menu, og derefter klikker du på dit nye projekt ”Google Maps API” i popuppen og trykker derefter på ”OPEN” i nederste højre hjørne.
Step 3.1
Klik på billedet for forstørre det
Popuppen lukker nu ned, og du ser forsiden igen som før – forskellen er dog, du nu kan se, at der står dit projektnavn, hvor der før stod ”Select a project”. Der skal nu stå ”Google Maps API” her.
Step 4
Klik på billedet for forstørre det
Vi skal nu ind og oprette denne API-nøgle, som gør, at vi kan fremkalde Google Maps og dens funktioner på din hjemmeside eller webshop.
Ude i venstre menu skal du holde musen over ”APIs & Services” og derefter ned og klikke på ”Credentials” i den nye dropdown-menu, der kommer frem.
Step 4.1
Klik på billedet for forstørre det
Du bliver nu ført videre til dit nye projekt, hvor nøglen kan oprettes. På denne side skal du klikke på ”+ CREATE CREDENTIALS” oppe i toppen og derefter vælge ”API key” i den dropdown, der kommer frem.
Step 4.2
Klik på billedet for forstørre det
Du kan nu se, at der er blevet oprettet en API-nøgle til dig. Kopiér og gem denne nøgle allerede nu fra feltet ”Your API key”, da den skal bruges senere i denne guide.
Husk ikke at give denne API-nøgle til andre end din webdesigner hos Aveo. Når du har kopieret og gemt din nøgle, kan du trykke på ”CLOSE”.
(Man kan begrænse sin API-nøgle til kun at virke på ens egen hjemmeside, hvis man ønsker. Dette er dog ikke et krav og ikke nødvendigt, hvis du ikke deler den ud. Ønsker du alligevel at begrænse den, kan du følge denne videoguide fra Google. Det relevante for dig er fra 1m 28sek -> 2m 58sek, da du skal lave en såkaldt ”HTTP referrers (web sites)”-begrænsning: https://www.youtube.com/watch?v=2_HZObVbe-g )
Step 5
Klik på billedet for forstørre det
Du skal nu ud i venstre menu igen og starte med at trykke på ikonet ”☰” i toppen til venstre for deres logo.
Nu kommer den gamle menu tilbage fra før, og du skal igen holde musen over ”APIs & Services” og denne gang ned og klikke på ”Library”.
Step 5.1
Klik på billedet for forstørre det
På denne side skal du starte med at trykke på ”VIEW ALL” ude til højre for kategorien ”Maps”. Dette burde gerne være den første, du møder på siden.
Step 5.2
Klik på billedet for forstørre det
Du får nu fremvist alle de muligheder, der er for Google Maps. Her skal vi bruge to af disse muligheder – ”Maps JavaScript API” og ”Places API”.
Vi starter med ”Maps JavaScript API”. Klik på denne.
Step 5.3
Klik på billedet for forstørre det
På denne undersider skal du klikke på ”ENABLE”.
Du bliver nu sendt til en ny underside. Vi mangler dog at aktivere den sidste Google Maps-funktion ”Places API”.
Følg ”Step 5” fra begyndelsen igen, og vælg denne gang ”Places API”.
Step 6
Klik på billedet for forstørre det
Før at Google vil lade dig bruge deres service, skal du tilkoble dit betalingskort til deres service.
Hvis du førhen har tilføjet dit betalingskort til deres service, behøver du ikke følge dette step, og du kan derfor sende din API-nøgle til din webdesigner.
Det betyder ikke, at det vil koste dig penge at bruge Google Maps, men det er blot et krav fra deres side.
For at tilkoble dit betalingskort skal du trykke på ”ACTIVATE” oppe i højre hjørne.
Step 6.1
Klik på billedet for forstørre det
Du bliver nu ført igennem en instruktion af Google ift. forskellige oplysninger, de ønsker fra dig, samt tilføjelsen af dit kort. Udfyld blot deres spørgsmål, indtil du er gennem alle punkter og er blevet godkendt.
Du er nu færdig med oprettelsen af din Google Maps API. Send din API nøgle, som du kopierede og gemte tidligere, til din webdesigner hos Aveo.
Så skal vedkommende nok være behjælpelig med at få den korrekt indsat på din hjemmeside. Skulle du have nogle spørgsmål omkring noget fra processen her, kan du altid række ud til din webdesigner.
Havde du en Google-konto i forvejen, og var guiden her ikke brugbar, bedes du kontakte din webdesigner, og så vil vedkommende hjælpe dig videre herfra.
