Lepsze mapy, czyli jak dostosować mapę Google do layoutu strony

Tomasz Gierasiumiuk (fot. archiwum prywatne)

Prawie każda strona internetowa zawiera zakładkę „kontakt”, na której znajduje się adres wraz z mapą. Nie wszystkim jednak podstawowy wygląd mapy Google pasuje. Na szczęście maps api-3 Google przychodzi nam na ratunek.

Dostosowanie mapy Google nie jest specjalnie skomplikowane. Aby ułatwić życie użytkownikom, Wielki Brat udostępnił bowiem narzędzie do edycji wyglądu poszczególnych warstw mapy.

Główne warstwy to:

granice administracyjne
krajobraz
punkty użyteczności publicznej
drogi
komunikacja
woda

Każda z nich dzieli się dodatkowo na kolejne warstwy. Mamy więc wielkie pole do manewru. Z dokumentacji dowiemy się, w jaki sposób zmieniać style naszej mapy.

Każdą z warstw możemy zmieniać w zakresie kolorów wypełnienia, obramowania i opisów lub po prostu włączać i wyłączać. Wybieramy interesującą nas warstwę i zmieniamy jej parametry. W tle mamy podgląd mapy.

Narzędzie Google do zmiany stylu mapy

Jeśli nie podoba nam się ten staroświecki interfejs narzędzia Google, to mamy alternatywną opcję. Aplikacja MapStylr ma bardzo przydatną funkcję „save”, dzięki której możemy dokończyć pracę nad mapą, np. kolejnego dnia. Ma też ładniejszy interfejs. W obydwu przypadkach, gdy już pokolorujemy mapkę, dostajemy gotowy kod stylu do użycia.

Dzięki zmianom na warstwach dostosujemy mapę do layoutu strony, wyłączymy, naszym zdaniem, niepotrzebne elementy.

Zakładka kontakt na stronie Agencji Firstborn

Poniżej kilka przykładów. Niektóre z nich trudno rozpoznać jako mapy Google, oczywiście dzięki stylom.

Źródło: firstborn.com

Źródło: pushhere.com/contact

Szukającym inspiracji, polecam serwis, w którym możemy zaprezentować swój styl i porównać go z innymi SnazzyMaps.com. Jest tam sporo przykładów - od monochromatycznych po wysoko kontrastowe, które mogą nam posłużyć jako baza do naszej mapy.

Na koniec nie pozostaje mi nic innego, jak zachęcić wszystkich do kolorowania swoich map. Dzięki temu możemy mieć niepowtarzalny i oryginalny wygląd zakładki z lokalizacją z pełną funkcjonalnością zamiast zwykłej i nie zawsze pasującej do naszej kreacji mapy.

Tomasz Gierasimiuk, interactive & digital Specialist w agencji Polymus. Z zawodu informatyk. Specjalizuje się w webaplikacjach. Od niedawna tworzy animacje w After Effects. Po godzinach programuje hobbystycznie mikrokontrolery Atmegi.