Google Maps API – dodawanie wielu lokalizacji na mapie używając custom posts
W tym artykule przedstawimy w jaki sposób użyć Google Maps API, aby wyświetlić listę custom posts w postaci pinezek na mapie. Naszym zadaniem będzie stworzenie listy miejsc, którą zapiszemy w postaci custom post type jako podróż. Każda podróż będzie miała określone:
- miejsce podróży (nazwa potoczna),
- państwo,
- datę,
- opis podróży,
- obraz (będzie wyświetlany na mapie jako punkt).
Ponadto chcielibyśmy połączyć linią lokalizacje, które odwiedziliśmy i pokolorować przestrzeń pomiędzy nimi. Po kliknięciu na daną lokalizacje – wyświetlimy informacje o niej.
Pod mapą umieścimy listę podróży, wraz z miejscami, które odwiedziliśmy. Po kliknięciu na dane miejsce na liście – wyświetli się informacja na mapie o danym punkcie.
Tworzymy API_KEY do Google Maps API
Google Maps API jest to bardzo rozbudowana aplikacja od Google, dzięki której możemy w bardzo rozmaity sposób wyświetlać różne informacje na mapach. Aplikacja znajduje się na Google Cloud Platform wraz z innymi aplikacjami Google. Niestety od jakiegoś czasu aplikacja stała się płatna.
Obecnie, aby korzystać z Google Maps API, trzeba założyć konto na Google Cloud Platform. Po założeniu konta otrzymujemy 300USD do wykorzystania na usługi Google. Do naszych zastosowań na potrzeby stworzenia artykułu w zupełności wystarczy, by stworzyć taką mapę. Natomiast jeśli chcielibyście stworzyć taką mapę na swojej stronie, która generuje dużo wyświetleń – darmowy limit zostanie szybko wykorzystany.
Jak wygenerować klucz do Google Maps API
Po zalogowaniu na swoje konto Google Cloud Platform tworzymy projekt o dowolnej nazwie. My nazwiemy nasz projekt – Travels API. Po utrzworzeniu projektu, wchodzimy w menu nawigacyjne i wybieramy Interfejsy API i usługi > Biblioteka.
W bibliotece wybieramy potrzebne aplikacje czyli:
- Maps Javascript API
- Places API.
Aktywujemy obydwie aplikacje i przechodzimy do tworzenia klucza.
Ponownie wracamy do głównego panelu Interfejsy API i usługi i przechodzimy do Dane logowania. Klikamy Utwórz Dane Logowania i wybieramy Klucz interfejsu API.
Przekieruje nas do Ekranu akceptacji OAuth. Nadajemy nazwę aplikacji i wybieramy Typ użytkowników > Zewnętrzni.