PORADNIK

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.

google-maps-api-jak-stworzyc-klucz

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.