Mapa Google w ICEberg CMS

W tym filmie przedstawię Moduł Google maps na przykładzie strony firmowej Krakweb. Od strony użytkownika strony www wygląda to następująco. Jest to podstrona z mapą Google, zawierająca zazwyczaj treść opisową i sekcję mapy, na której może, ale nie musi być zaznaczony punkt - tzw. marker. Moduł Google Maps służy zwykle do tworzenia podstrony “Kontakt” w serwisie firmowym.
2016-10-26 00:00
3 minuty czytania

Wskazanie lokalizacji obiektu na mapie

Wskazanie lokalizacji może być wykonane przy pomocy standardowego lub indywidualnego markera. Marker jest to obrazek wskazujący lokalizację obiektu na mapie. W naszym przypadku zdecydowaliśmy, że chcemy, aby był to marker z naszym sygnetem. Od strony panelu administracyjnego wygląda to następująco. Mapa Google jest to moduł podstrony, więc tak jak w przypadku innych treści aby stworzyć podstronę mapy, stwórz najpierw w strukturze katalog, w którym umieścisz treść typu mapa. U nas jest to katalog “Kontakt” (taka jest też nazwa podstrony). Żeby dodać mapę wybierz w polu “Typ”, z listy rozwijanej - Mapa Google, poniżej wpisz nazwę tej podstrony, a następnie naciśnij przycisk “Dodaj element”. Po tych czynnościach przejdziesz do opcji edycji. Pierwszym ekranem, jaki się Tobie pojawi, jest mapa zazwyczaj wyśrodkowana na Polskę, a także pole do wpisania adresów. Są dwie możliwości zlokalizowania i wskazania danego punktu na mapie. Po pierwsze możesz wpisać adres - np. Rzemieślnicza 20, Kraków. Po wpisaniu adresu kliknij “Znajdź współrzędne”. Wyświetli się wtedy marker centrujący mapę dokładnie na wybrane przez Ciebie współrzędne. Możesz także przybliżyć widok mapy, żeby sprawdzić i ręcznie zaznaczyć miejsce, które chcesz wskazać na mapie Google. Dobrą praktyką jest podanie adresu, a następnie za pomocą funkcji drag and drop (czyli przeciągnij i upuść) dokładne przesunięcie markera we właściwe miejsce.

Współrzędne geograficzne obiektu

Kolejne 2 pola to współrzędne - masz możliwość wpisania ich ręcznie. Jest to alternatywny sposób wskazania lokalizacji miejsca, które chcesz pokazać. Sposób ten przydaje się w sytuacji, kiedy nie znasz adresu lub Google nie może go znaleźć.

Przybliżenie mapy

Kolejnym elementem jest parametr przybliżenia - zazwyczaj ustawiany domyślnie na 13. Przybliżenie to parametr, który może przyjąć wartości od 0 do 21. Przybliżenia o wartościach w granicach od 13 do16 pozwolą osiągnąć dobry efekt, w przypadku chęci pokazania lokalizacji firmy na mapie.

Typ mapy

Kolejne pole pozwala na wybór typu mapy. Domyślnie ustawiona jest mapa topograficzna (normalna), natomiast możesz ją zmienić na mapę satelitarną - na której widać zdjęcia satelitarne lub mapę hybrydową, gdzie na zdjęcia satelitarne nałożone są elementy mapy topograficznej.

Konfiguracja nawigacji po mapie

Położona poniżej lista rozwijana pozwala na wybranie sposobu, w który widoczny będzie na mapie tryb nawigacji: może go nie być w ogóle, może być ustawiony jako domyślny - mały lub duży. Domyślny jest zazwyczaj ten, który widzimy startowo na Google Maps. Możesz także włączyć bądź wyłączyć ikonę ludzika Street View i możliwość zmiany skali, czyli ustawianie pokazywania skali jaka jest na mapce oraz zmianę typów mapy.

Połączenie mapy z formularzem

Kolejne pole wykorzystywane jest do łączenia strony mapy, z formularzem z modułu “customform CP”, czyli formularzem o dowolnej lokalizacji. Jeżeli masz już stworzony jakiś mały formularz, który chcesz umieścić na stronie z mapą, konstruując w ten sposób rozbudowaną podstronę kontaktową to możesz to zrobić właśnie tutaj. Wklej w tym miejscu zmienną formularza, którą znajdziesz przy nazwie formularza na liście formularzy w zakładce Moduły. Po wykonaniu tej czynności formularz będzie się wyświetlał na Twojej podstronie pod mapą. Położenie formularza możesz zdefiniować.

Włączanie markera

Kolejny checkbox to włączanie bądź wyłączanie markera. Jeżeli wyłączymy marker to mapka wycentruje nam się na odpowiedni punkt natomiast nie będzie ikonki, która będzie wskazywać dokładnie ten punkt.

Wybór markera

Kolejne pole daje Tobie możliwość wybrania własnego markera. Przejdźmy teraz na chwilę do strony Krakwebu. Tak jak widać, na Krakwebie został załadowany marker odpowiednio przygotowany dla naszej strony. Jako redaktor serwisu, tworząc mapę możesz załadować tutaj dowolny marker. Idealny rozmiar ikony to 32 na 32 piksele. Możesz tu jednak wgrać obrazki o większych rozmiarach. Pojawią się one wycentrowane odpowiednio do punktu, który będziesz chciał wskazać na mapie, środkowym, dolnym brzegiem tego obrazka. I tak, jeżeli masz na mapie marker to po kliknięciu na niego pojawi się chmurka z informacją, którą wpisujemy w to pole edytora. Jeżeli to pole nie zostanie przez Ciebie uzupełnione to chmurka na mapie, nie będzie się pojawiała.

Opis mapy

Ostatnie pole edytora jest to pole z opisem tekstowym strony. Tutaj możesz ustawić dowolną treść i ją sformatować. To wszystko załaduje się Tobie w odpowiednim, zdefiniowanym przez developera w szablonie, miejscu na stronie. W przypadku strony Krakweb jest to lewa strona obok mapy, dlatego wszystko mamy tutaj wyjustowane do prawej strony Po kliknięciu edytuj wprowadzisz zmiany w stronie z mapą. Warto pamiętać też, że jeżeli chodzi o mapy to, dla każdej strony z mapą trzeba wygenerować odpowiedni klucz API. Jest to czynność robiona jednorazowo przy wdrożeniu modułu na stronę.

ICEberg CMS - Możesz!


Blog Artykuły
Ustawienia dostępności
Wysokość linii
Odległość między literami
Wyłącz animacje
Przewodnik czytania
Czytnik
Wyłącz obrazki
Skup się na zawartości
Większy kursor
Skróty klawiszowe