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.

google-maps-api-jak-stworzyc-klucz-api

Gotowe! Mamy nasz klucz, który od razu kopiujemy.

klucz-api-google-maps

Tworzymy custom post type do wyświetlenia na mapie

Nasz Custom Post Type będzie miał slug o nazwie ‘podroz‘. Nasza podróż będzie mieć kilka miejsc na mapie, więc musimy skorzystać z ACF Repeater Field. Jest to typ pola, który pozwala powtarzać wartości posta tyle razy ile użytkownik potrzebuje. Jest to dodatek do znanego pluginu pozwalającego na dodawanie Custom Fields do postów danego typu. Jeśli nie wiesz jak działają Custom Fields – przeczytaj nasz artykuł: Advanced Custom Fields – własne typy pól WordPress.

Jak dodać pole powtarzalne w ACF ?

Po dodaniu naszego custom post type ‘podroz’, dodajemy pole powtarzalne. Tworzymy nową grupę pól, które odpowiadają typowi wpisu ‘podroz’. Dodajemy odpowiednią etykietę i wybieramy typ pola: Pole powtarzalne. Następnie dodajemy wszystkie pola, o których pisaliśmy na początku artykułu.

acf-repeater-field-jak-stworzyc

Gotowe! Mamy stworzony custom post type Podróż, który posiada wszystkie pola, potrzebne do wyświetlenia na mapie. Teraz należy dodać kilka przykładowych podróży i odwiedzonych miejsc.

Tworzymy widget dodający mapę i listę naszych podróży

Stworzymy widget podroze.php, który będzie dodawał nam mapę i pod nią listę naszych podróży. Do tego celu użyjemy page builder’a WPBakery. Oczywiście możemy również użyć Elementora, jeśli nie wiesz jak dodawać widgety w tych wtyczkach – standardowo odsyłam do artykułów:
Własny plugin dodający widget do wtyczki Elementor
Własna wtyczka dodająca widget do pluginu WPBakery

Wewnątrz widget’u umieszczamy podstawową konfigurację i wczytujemy listę z podróżami i miejscami, które odwiedziliśmy podczas podróży.

Tworzymy mapę z lokalizacjami przy pomocy AJAX

Gdy mamy już strukturę do której wczytamy mapę oraz listę naszych podróży, wówczas przechodzimy do tworzenia mapy. W tym celu przechodzimy do pliku functions.php, gdzie musimy dodać nasz skrypt redo-script.js oraz zarejestrować skrypt Google Maps API.

Jeśli nie wiesz jak działać z AJAX’em w WordPress zapraszam do przeczytania artykułu: Jak stworzyć filtr wczytujący custom post za pomocą AJAX w WordPress?

W funkcji get_travels() dodajemy na początek miasta do naszej tablicy JSON $contents. Po początkowej konfiguracji i wyświetleniu mapy z miejscami, przejdziemy do bardziej zaawansowanej konfiguracji naszej mapy (miejsce, panśtwo, data, opis, obraz).

Skrypt AJAX wczytujący Google Maps API z custom posts

W pliku functions.php stworzyliśmy funkcję get_travels(), która zwróci nam listę Miejsc do wyświetlenia na mapie. Aby ją obsłużyć musimy najpierw skonfigurować odpowiednio mapę do jej wyświetlenia. Stworzymy więc funkcje initializeMap() oraz codeAdress().

Google Maps – inicjalizacja mapy

W funkcji initializeMap() wczytamy ID naszego kontenera na mapę i dodamy do niej mapę z podstawową konfiguracją oraz miejscami, które później wczytamy przy pomocy AJAX. Dodatkowo przy inicjalizacji mapy skorzystamy z funkcji codeAdress(), która sprawi, że po kliknięciu na dane miejsce, pokaże nam się informacja o nim.

Wczytanie danych do Google Maps przy pomocy AJAX

Teraz należy wczytać nasze miejsca podróży i wyświetlić na mapie, którą wyświetlimy w naszym kontenerze o id #map-container za pomocą funkcji initializeMap().

Otrzymaliśmy widok naszej mapy z listą podróży i miejscami.

google-maps-custom-post-type-wordpress

Konfiguracja Google Maps API w WordPress

Mamy już podstawową konfigurację naszej mapy, która wyświetla miejsca podróży. Chcielibyśmy skonfigurować wyświetlanie naszej mapy w sposób omawiany na początku. Zamiast pinezek na mapie wyświetlimy obraz przypisany do danego miejsca. W opisach miejsc ma się znaleźć nazwa miejsca, państwo, opis i data. Dodatkowo każda podróż ma być połączona liniami a obszar tworzący wielokąt – ma być zamalowany.

Google Maps API – wczytywanie własnych danych

Pierwszym krokiem jest wczytanie i wyświetlenie danych, które chcielibyśmy dodać na mapę. Żeby to zrobić musimy wczytać resztę danych w pliku functions.php. Poza nazwą miejsca podróży musimy pobrać także:

  • listę podróży,
  • nazwę państwa,
  • opis,
  • date,
  • obraz.

Całość kodujemy json_encode() i wysyłamy w tablicy $contents.

Przechodzimy do naszego skryptu JS – redo-script.js. Musimy odpowiednio uporządkować JSON’a, którego otrzymaliśmy z serwera i wyjąć z niego potrzebne dane.

Mamy już wszystkie dane i możemy przekazać je do funkcji initializeMap(), inicjującej naszą mapę. Pobieramy dane w konstruktorze naszej funkcji:

Teraz musimy przebudować naszą pętlę for aby odczytała listy podróży wraz z zawartymi w nich danymi.

Teraz w funkcji codeAddress() możemy przekazać wszystkie dane lokalizacji i ustawić obraz naszej pinezki. Obraz ustawiamy za pomocą wartości icon konstruktora google.maps.Marker(). Ustawimy też rozmiar obrazu na 50px szerokości oraz 30px wysokości. Resztę danych przekażemy do wartości infowindow, która wyświetli nam na ekranie resztę informacji o miejscu podróży.

W ten sposób otrzymaliśmy widok z obrazami zamiast pinezek oraz informacjami o danym miejscu podróży.

tworzenie-wlasnej-mapy-google-maps

Polygons i polylines w Google Maps API – jak zaznaczyć obszar na mapie

Przechodzimy do kolejnego wymogu naszego projektu. Chcielibyśmy aby lista pod mapą stała się interaktywna – po kliknięciu na dane miejsce podróży otworzy się okno informacyjne na mapie o danym miejscu. Poza tym chcemy zaznaczyć na mapie obszary naszych podróży, łącząc ze sobą wszystkie miejsca danej podróży i tworząc wielokąt, który pomalujemy na odpowiedni kolor.

Interaktywna lista Google Maps API

W naszym skrypcie redo-script.js umieszczamy poza wszystkimi funkcjami, aby można było ją czytać także w innych plikach – pustą tablicę o nazwie gmarkers[]. Tablica ta będzie przechowywała wszystkie lokalizacje naszej mapy. Wywoływana będzie po kliknięciu na dany element naszej listy (miejsce podróży).

Tablicę gmarkers[] przekażemy w funkcji codeAddress() i dodamy do niej wartość markera za pomocą funkcji push().

Odpowiednio modyfikujemy nasz kod redo-script.js:

Teraz przechodzimy do naszego pliku podroze.php w pluginie REDO JSComposer Additional.

Dodajemy licznik $i=0 naszej pętli while(), który zliczy ile jest miejsc podróży i dla każdego miejsca doda odnośnik do przypisanego markera.

Całość kodu podroze.php:

Tworzymy własny obszar na mapie Google

Teraz za pomocą konstruktora google.maps.Polygon tworzymy obszary naszych podróży. Umieszczamy w pierwszej pętli for(var i in travels) – odpowiadającej za wyświetlenie naszych list podróży – pustą tablicę poly =[], która będzie przechowywać współrzędne naszych miejsc podróży. Następnie dodajemy wartość polilinia. Wartość ta będzie przechowywać stworzony Polygon (obszar na mapie odpowiadający obszarowi naszej podróży). Ustawiamy kolor obszaru i inne wartości.

Przekazujemy tablicę poly[] i zmienną polilinia do funkcji codeAddress().

W codeAddress() ustalamy latitude oraz longitude miejsca podróży. Następnie w odpowiedniej strukturze dodajemy do zmiennej polyline, która jest przechowywana w zmiennej shape, za pomocą funkcji push(). Ostatecznie ustawiamy ścieżkę naszego obszaru za pomocą funkcji setPath().

Wracamy do naszej funkcji initializeMap() i na końcu naszej pętli for(var i in travels) dodajemy końcową ścieżkę zwróconą przez codeAddress() do obszaru polilinia. Następnie dodajemy nasz obszar do mapy za pomocą funkcji setMap().

To już cały kod naszej mapy.

redo-script.js:

functions.php:

Otrzymany widok mapy:

google-maps-api-custom-maps

Podsumowanie

Google Maps API jest potężnym narzędziem, które można modyfikować na wiele sposobów. Dokumentacja aplikacji jest na prawdę doskonała i znajdziemy tam wszelką wiedzę, jaką potrzebujemy do zrealizowania założonych celów naszej aplikacji. Udało nam się zrealizować postawione na początku artykułu zadanie i zintegrować Google Maps API z funkcjonalnościami CMS WordPress. Mam nadzieję, że artykuł pomoże komuś zrozumieć lub rozwiązać spotykane przy tworzeniu takiej mapy problemy.

Zapraszam do przeczytania innych artykułów: Przydatne artykuły.