Mapka dojazdu jest bardzo ważnym elementem na stronie zwłaszcza dla firm, a także sklepów, które mają swoją siedzibę. Dodatek ten przede wszystkim ułatwia nawiązanie kontaktu z potencjalnymi klientami. Do wyboru mamy Google Maps, które od pewnego czasu są płatne (oczywiście koszt zależy od liczby odsłon), a także darmowe odpowiedniki. Jednak Mapy Google są najbardziej popularne. W artykule pokażę jak dodać mapę Google do WordPressa za pomocą wtyczki.

Od pewnego czasu do obsługi Mapy Google potrzebny jest klucz API. Jednak jest też sposób, aby to ominąć, o czym piszę w poprzednim artykule Jak wstawić mapę Google do WordPressa. Jeśli jednak potrzebujesz bardziej rozbudowanej mapy lub chcesz użyć wtyczki, to serdecznie zapraszam do dalszej części artykułu.

Zainstaluj wtyczkę i wklej klucz API

W pierwszej kolejności zainstaluj i włącz wtyczkę WP Google Maps.

Następnie przejdź do jej ustawień i wklej klucz API.

Mapy -> Ustawienia -> Advanced Settings. Wklej klucz do pola Google Maps API Key (required).

Jeśli nie masz jeszcze wygenerowanego klucza API, to serdecznie zapraszam do artykułu, w którym tłumaczę krok po kroku jak wygenerować klucz API Google Maps.

Włącz dodatkowe biblioteki

Do poprawnego działania wtyczki musisz włączyć trzy biblioteki w konsoli Google Cloud. W artykule Klucz Google Maps API – jak go uzyskać pokazuję jak włączyć bibliotekę Maps JavaScript API. Jednak wtyczka WP Google Maps potrzebuje jeszcze Maps Geocoding API oraz Maps Places API.

Podsumowując w projekcie z mapą na platformie Google Cloud, muszą być włączone trzy biblioteki:

• Maps JavaScript API,
• Maps Geocoding API,
• a także Maps Places API.

Zaloguj się do swojego konta Google Cloud i wybierz projekt z mapą Google. Następnie przejdź do zakładki Interfejsy API i usługi -> Biblioteka

Znajdź w wyszukiwarce dodatkowe biblioteki Maps Geocoding API oraz Maps Places API i je włącz.

Ustawienia ogólne

Mapa jest dostępna w sekcji Mapy-> Mapy.

W darmowej wersji wtyczki możemy utworzyć tylko jedną mapkę. Jednak w przypadku prostej strony, czy sklepu w zupełności wystarczy bezpłatna wersja WP Google Maps.

Domyślnie jest już utworzona mapka, którą należy edytować, klikając przycisk edytuj.

Na wstępie wyświetli się okienko z zapytaniem, jakiego rodzaju chcesz użyć mapy: darmowej OpenLayers czy Google Maps. W tym poradniku konfigurujemy Mapę Google, także wybierz drugą opcję Google Maps.

Pierwsza zakładka General Settings są to ustawienia ogólne. Dostępne są opcje:

• Krótki kod – Jest to shortcode, który należy wkleić do zakładki, w której chcemy umieścić mapę.
• Nazwa mapy – Nazwa dla mapy może być dowolna.
• Zoom level – Stopień powiększenia mapy.
• Szerokość – Szerokość mapki. Możesz podać ją w pikselach lub procentach. Jeśli chcesz, żeby mapka była rozciągnięta na całą szerokość ekranu, to wpisz wartość równą 100%.
• Wysokość – Wysokość mapki. Możesz podać ją w pikselach lub procentach.

Zmiana motywu

W zakładce Themes możemy zmienić motyw dla mapy.

Ustawienie znacznika na mapie

Pod ustawieniami znajduje się sekcja, w której możemy dodać znaczniki do mapy. W darmowej wersji wtyczki można dodać więcej niż jeden znacznik. Jednak nie można zmienić wyglądu ikonki. Ponadto można dodać wielokąty, linie łamane, okręgi, prostokąty.

W poradniku tym pokażę jak dodać zwykłe znaczniki.

• Adres/pozycja GPS – wpisz wybraną lokalizację.
• Animacja – animacja znacznika. Do wyboru są trzy opcje.
• Okno informacyjne domyślnie otwarte – dymek nad znacznikiem może być automatycznie wyświetlany, albo dopiero po kliknięciu.

Jak dodać mapę Google na stronę za pomocą shortcode

W ostatnim kroku wstawimy naszą mapkę na stronę. Skopiuj shortcode.

Następnie wklej shortcode do zakładki, w której chcesz wyświetlić mapkę.