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ę.
