Jak dodać mapę Google na stronę internetową stanowi jedno z podstawowych zagadnień przy projektowaniu serwisów lokalizacyjnych. Dzięki Google Maps API możesz w prosty sposób wyświetlić interaktywną mapę, pokazać trasę dojazdu czy oznaczyć punkty zainteresowania przy pomocy znaczników. W poniższym artykule omówię proces od rejestracji w konsoli Google Cloud, przez wygenerowanie klucz API, po zaawansowaną integrację z wykorzystaniem JavaScript i responsywnych elementów.
Co to jest Google Maps API?
Google Maps API to zestaw bibliotek udostępniany przez Google, który pozwala na osadzanie map, sterowanie ich zachowaniem oraz dodawanie własnych warstw i znaczników. API udostępnia różne tryby działania:
- Maps JavaScript API – najbardziej rozbudowane, pozwala na pełną kontrolę mapy za pomocą skryptów.
- Maps Embed API – prostszy sposób wstawienia mapy za pomocą iframe.
- Places API – ułatwia wyszukiwanie miejsc i autouzupełnianie adresów.
- Directions API – oblicza trasy i przewiduje czas przejazdu.
Każde z tych rozwiązań wymaga posiadania klucza API, który powiązany jest z projektem w Google Cloud Console. Bez odpowiednio skonfigurowanych uprawnień i limitów korzystanie z API może być niemożliwe lub wiązać się z dodatkowymi opłatami.
Rejestracja projektu i uzyskanie klucza API
Utworzenie projektu w Google Cloud Console
Aby rozpocząć pracę, wejdź na stronę Google Cloud Console i zaloguj się na konto Google. Utwórz nowy projekt, nadając mu czytelną nazwę. W panelu API & Services wybierz „Enable APIs and Services” i wyszukaj interesujące Cię biblioteki, np. Maps JavaScript API oraz Directions API. Po włączeniu wybranych usług przejdź do zakładki „Credentials”.
Generowanie klucza API
W „Credentials” kliknij „Create credentials” i wybierz „API key”. Wygenerowany klucz zostanie wyświetlony natychmiast. Skopiuj go – będzie potrzebny podczas implementacji. Pamiętaj, żeby nie publikować tego klucza dowolnie, gdyż może zostać wykorzystany przez niepowołane osoby, co może generować niespodziewane koszty.
Ograniczenia i bezpieczeństwo
Zaleca się ograniczyć dostępność klucza do konkretnych domen (ang. HTTP referrers) lub adresów IP. W ustawieniach klucza ustaw listę dozwolonych refererów, np. https://twojastrona.pl/*. Dzięki temu zabezpieczysz się przed nadużyciami i nieautoryzowanym dostępem.
Wstawienie prostej mapy za pomocą iframe
Wiele projektów nie wymaga zaawansowanej interakcji z mapą. W takim wypadku wystarczy zastosować Maps Embed API. Generacja kodu odbywa się w prosty sposób:
- Przejdź na stronę Google Maps.
- Wpisz adres lub współrzędne lokalizacji.
- Kliknij „Udostępnij” → zakładka „Osadź mapę”.
- Skopiuj wygenerowany fragment