Stylizacja map Google

Google Maps jakie są, każdy widzi – parafrazując nieco słowa klasyka. Bez trudu potrafimy rozpoznać, że mapka dostarczana jest dzięki gigantowi z Mountain View. Bardzo często spotyka się na stronach ramki z umieszczonym wewnątrz wycinkiem mapy, ukazującym adres np. siedziby firmy. Znane są mi sytuacje, w których wymagane jest umieszczenie na stronie wycinka mapy (domyślnie w jasnej tonacji), podczas gdy witryna w całości posiada zdecydowanie ciemną kolorystykę. Wtedy pojawia się mały problem. Jak pogodzić wymaganą funkcjonalność strony z dopasowaniem mapy pod względem estetycznym? Spieszę z wyjaśnieniami.

Mapa w ramce


Podstawowy sposób implementacji map Google jest banalny. Wystarczy wejść na stronę Google Maps, po czym w prawym dolnym rogu ekranu wybrać ikonę trybu, a następnie „Udostępnij i umieść mapę”. Kopiujemy kod iframe z karty „Umieść mapę” i już jesteśmy gotowi do wstawienia go na stronę. Nic odkrywczego, standardowa procedura. Jednak jeżeli chcemy mieć większy wpływ na wygląd mapy, iframe jest dla nas niewystarczające.

Ingerencja w wygląd i kolorystykę map


Z pomocą przychodzi nam serwis Snazzy Maps. Oferuje on nam ponad sto różnych gotowych stylów map. W tym wypadku nie są one wyświetlane przy pomocy ramek, a z użyciem javascript i CSS. Nie byłoby to możliwe, gdyby nie API w wersji trzeciej, serwowane nam przez Google Maps. Działanie mechanizmu wytłumaczę na przykładzie stylu Flat Map.

Wklejanie tutaj całości kodu js (znajdującego się pod tytułem „Javascript style array” na stronie przykładu) nie ma sensu, gdyż w uporządkowanej postaci zajmuje dużo miejsca. Zresztą cały mechanizm działania rzuca się nam w oczy od samego początku. Popatrzmy na ten fragment:

"featureType": "road", //typ obiektu
        "stylers": [
            {
                "visibility": "on" //widoczność obiektu
            },
            {
                "color": "#ffffff" //kolor obiektu
            }
        ]

W tym wypadku na warsztat mamy wzięte zwyczajne drogi. Visibility, czyli widoczność, jest włączona. Dodatkowo, określony został kolor dróg: #ffffff, czyli szesnastkowo biały. Analizujemy dalszy fragment:

"featureType": "road.arterial", //główna droga
        "stylers": [
            {
                "visibility": "on" //widoczność włączona
            },
            {
                "color": "#fee379" //kolor żółty
            }
        ]

Tutaj road zostało zastąpione przez road.arterial. Główne drogi, tak samo jak zwykłe, są widoczne. Różni się tylko sposób ich przedstawienia na mapie, w tym wypadku arterie oznaczono odcieniem żółtego. Mechanizm, jak widać, jest bardzo prosty. Najpierw mamy nazwę obiektu, a następnie określamy jego właściwości. W kodzie po drogach i arteriach autor zdefiniował sposób wyświetlania się autostrad, krajobrazu, wody itd. Rzućmy okiem na jeszcze jeden fragment kodu:

"featureType": "road",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]

Opisywanym obiektem są tutaj drogi. Pod ich wywołaniem pojawiła się linijka "elementType": "labels". Oznacza to, że stylizowane są konkretnie etykiety (nazwy) dróg, a nie drogi jako całość. Widoczność etykiet, jak widać, została wyłączona. I rzeczywiście tak jest. Spoglądając na mapę widzimy, że nazwy dróg nie są na niej widoczne.

To na tyle, jeżeli chodzi o tablicę stylu. W przykładzie jest jeszcze jedno, kluczowe okienko. Pod tytułem „Create a map” mamy taki oto fragment kodu:

var myOptions = {
    zoom: 15, //zbliżenie
    center: new google.maps.LatLng(53.385873, -1.471471), //współrzędne
    mapTypeId: google.maps.MapTypeId.ROADMAP, //rodzaj mapy
    styles: style_array_from_above_here //tablica stylu
};

var map = new google.maps.Map(document.getElementById('map'), myOptions); //div id="map"

W drugiej linijce ustalamy poziom zbliżenia widoku. W trzeciej z kolei musimy podać współrzędne, które wskazują środek mapy. Następnie mamy rodzaj mapy – ustalony na mapę drogową (oprócz niej mamy jeszcze do wyboru satelitarną, hybrydową i terenową). W piątej linijce należy wkleić tablicę stylu, która znajduje się w okienku powyżej. Na samym końcu mapę osadzamy w elemencie o id="map", czyli np. w div.

W porządku, tylko jak to wstawić?


Powyżej przeanalizowałem najważniejsze fragmenty kodu, które zawarto na stronie stylu Flat Map. W kwestii implementacji tego typu mapki na swojej stronie www, najlepiej jest posłużyć się dołączoną stroną demo. Zawiera ona oczywiście kod znajdujący się w ramkach na stronie przykładu. Ponadto pojawiają się na niej dwie nowości. Po pierwsze – div o określonych wymiarach, w którym osadzony jest skrypt. Po drugie, najważniejsze – personalny klucz API. Jeżeli chcemy wyświetlić mapę zmodyfikowaną w ten sposób, musimy go uzyskać. Jak? Z pomocą przychodzi nam ta strona. Następnie wystarczy go po prostu podmienić z tym, który znajduje się w demo.

Podsumowanie


Gotowe style dostarczane przez Snazzy Maps są dobrą opcją dla tych, którym chce się skorzystać z istniejących już rozwiązań. Jednak jeżeli chcecie samemu pobawić się w modyfikację wyglądu map, zachęcam do zapoznania się z tym artykułem na stronie Google Developers. Opisano tam całą składnię odnośnie zmiany stylu mapy. Alternatywą jest gotowy kreator, udostępniany przez Google. Pozwala na wygenerowanie swojego własnego stylu mapy bez potrzeby własnoręcznego wstukiwania kodu.

Powiązane tagi
    
Michał Ziółkowski

Michał Ziółkowski

Front-end Developer i Web Designer. Tworzę strony internetowe od A do Z (z wykorzystaniem m.in. Wordpressa i Bootstrapa), projektuję grafikę oraz zajmuję się SEO. Od czasu do czasu dodaję teksty na blogu. Jestem współzałożycielem agencji interaktywnej MobileTry, przede wszystkim tworzącej strony internetowe w Olsztynie.

Uwaga! Moja strona internetowa nie jest aktualizowana od kilkunastu miesięcy. Najnowsze informacje o mnie oraz o projektach, w których brałem (lub biorę) udział, znajdziesz na stronie internetowej firmy MobileTry. Również korzystając z danych kontaktowych zamieszczonych na wspomnianej stronie, możesz podjąć z nami współpracę.

Rozumiem