3.12.2014 / Portale / Okiem eksperta
 

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

  • Polub
  • Opublikuj
  • Udostępnij
Tomasz Gierasimiuk
 
Tomasz Gierasiumiuk (fot. archiwum prywatne)
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.

  • Polub
  • Opublikuj
  • Udostępnij
Tag arrow
Chmura tagów

Tagi: mapy google


wizytówki firm
szukasz klientów dla firmy?
  • AdPeak AdPeak

    AdPeak jest agencją, której główne kompetencje leżą w obszarach SEM (AdWords, Bing Ads, Yandex) oraz SEO...

    Zobacz profil w katalogu firm
  • ASPER SOFTWARE HOUSE ASPER SOFTWARE HOUSE

    ASPER SOFTWARE HOUSE z Warszawy to osiem lat doświadczenia i dziesiątki zadowolonych Klientów. W naszej pracy...

    Zobacz profil w katalogu firm
  • NuOrder NuOrder

    Jesteśmy partnerem marek w zakresie kompleksowych działań interaktywnych i kampanii performance. Budujemy...

    Zobacz profil w katalogu firm
Komentarze (1)
asia
1. asia, 46.134.38.*, 05.01.2017 / 13:22
Bardzo dziękuję, tego właśnie potrzebowałam :)
Trwa zapisywanie komentarza
Dodaj komentarz
Zaloguj się
Jeśli nie masz jeszcze konta w Interaktywnie.com - możesz się zarejestrować albo
wymagane
 
obrazek nieczytelny
 
 
wyślij
wizytówki firm
szukasz klientów dla firmy?
ASPER SOFTWARE HOUSE
 
Arrow
newsletter
Arrow
Loader
Up Down
ostatnie komentarze
 
Dołącz do społeczności interaktywnie.com
 
 
 
 
© 2017 interaktywnie.com. All rights reserved.