Jak dodać Google Maps do swojej strony?

Skoro się tutaj znalazłeś/łaś, prawdopodobnie chcesz, aby w konkretnej sekcji Twojej strony internetowej wyświetlała się Mapa Google z oznaczeniem danej lokalizacji (lub wielu lokalizacji). Rozwiązanie tego problemu jest całkiem proste.

Wystarczy zarejestrować swój nowy klucz API Google Maps i dodać oprogramowanie do odpowiedniej sekcji strony. 

Dla niewtajemniczonych zaczniemy od wyjaśnienia, czym jest klucz API.

Następnie przejdziemy bezpośrednio do konkretów, czyli do:
1. Rejestracji Google Maps API
2. Ograniczenia dostępu Google Maps API do swojej domeny.

Czym jest klucz API Google Maps?

Klucz API (Application Programming Interface) – klucz interfejsu programistycznego aplikacji, to fragment kodu oprogramowania.

Najczęściej ma postać wygenerowanego ciągu znaków. Definiuje on, w jaki sposób programy mają się ze sobą komunikować i pozwala na implementacje jednego programu do drugiego.

API w przypadku Google Maps pozwala nam na dodanie do swojej strony internetowej lub aplikacji Mapy Google, oraz oznaczenia na niej konkretnej lokalizacji. Pozwala również na identyfikację użytkownika, który z niego korzysta.

Jak zarejestrować nowy klucz API do Google Maps?

Logowanie do konta Google

Pierwszym co musimy zrobić aby zarejestrować nowy klucz API dla Google Maps musimy zalogować się na platformie Google Maps dla developerów za pomocą swojego konta Google. Przycisk logowania znajduje się w prawym górnym rogu strony

Logowanie do konta Google Maps.
Logowanie do konta Google Maps

Jeśli nie posiadamy konta, musimy je najpierw założyć. 

Następnie przechodzimy przez opcje konfiguracji swojego konta. 

Konfiguracja konta Google Maps Cloud 

1. Zaczynamy od naciśnięcia przycisku Get Started.

Konfiguracja konta Google Maps – Krok 1.
Konfiguracja konta Google Maps | Krok 1

2. Następnie uzupełniamy informacje o koncie. 

Konfiguracja konta Google Maps – Krok 2.
Konfiguracja konta Google Maps | Krok 2
Dlaczego muszę podać dane do swojej karty płatniczej?

Model biznesowy Google Maps to model freemium – wszyscy użytkownicy otrzymają co miesiąc bezpłatnie 200 dolarów na połączenia API.

Dla większości stron internetowych taki miesięczny kredyt jest więcej niż wystarczający. Niezależnie od tego, czy chodzi o stronę kontaktową, czy o coś bardziej złożonego, jak np. wyszukiwarka sklepów.

Google potrzebuje danych karty kredytowej by naliczać opłatę po przekroczeniu progu 200 dolarów.

3. Po wypełnieniu wszystkich danych otrzymamy swój klucz API. 

Konfiguracja konta Google Maps – Krok 3.
Konfiguracja konta Google Maps | Krok 3

Ale to jeszcze nie koniec… 

Konfiguracja klucza API Google Maps 

Teraz musimy skonfigurować opcje naszego klucza API i określić, w jakich celach będzie używany. 

1. Najpierw przechodzimy do Konfiguracji Ekranu Zgody.

Konfiguracja klucza API Google Maps – Krok 1.
Konfiguracja klucza API Google Maps | Krok 1

2. Określamy, w jakim zakresie będziemy korzystać z API. 

Konfiguracja klucza API Google Maps – Krok 2.
Konfiguracja klucza API Google Maps | Krok 2 

Kolejno wypełniamy wszystkie niezbędne informacje. 

3. Następnie wracamy do ekranu Dane logowania 

Konfiguracja klucza API Google Maps – Krok 3.
Konfiguracja klucza API Google Maps | Krok 3

4. I przechodzimy do ustawień swojego klucza API. 

Konfiguracja klucza API Google Maps – Krok 4.
Konfiguracja klucza API Google Maps | Krok 4

Ograniczenie dostępu klucza API Google Maps 

W ustawieniach klucza API możemy ograniczyć dostęp klucza API tylko dla naszej witryny, aby zapobiec jego nieautoryzowanemu wykorzystaniu. 

#1. Ustawiamy tutaj rodzaj ograniczenia.

#2. Oraz lokalizacje, w których jest ograniczony.

Ograniczenie klucza API Google Maps.
Ograniczenie klucza API Google Maps

Dodanie „/* na końcu adresu domeny spowoduje,  że klucz będzie działać na jej każdej podstronie.

Uzyskanie klucza API Google Maps

Klucz jest już odpowiednio skonfigurowany i gotowy do wykorzystania.

1. Teraz wystarczy już tylko kliknąć, w przycisk POKAŻ KLUCZ i go skopiować. 

Kopiowanie odpowiednio skonfigurowanego klucza API Google Maps.
Kopiowanie odpowiednio skonfigurowanego klucza API Google Maps

Nie masz czasu na samodzielne wprowadzaniem zmian na firmowej stronie internetowej? Sprawdź, jak możemy Ci w tym pomóc.

Adam Gałęcki

Z marką Dogtronic trzymamy się razem od samego początku jej powstania. W dużym skrócie odpowiadam za całościową komunikację marki we wszystkich kanałach marketingu internetowego.

Przekształć
swoje pomysły w rzeczywistość

Skontaktuj się z nami i pozwól nam sprawdzić jak możemy Ci pomóc.

Najciekawsze treści na Blogu