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?
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?
6ix
 
Arrow
newsletter
Arrow
Loader
Up Down
ostatnie komentarze
 
Dołącz do społeczności interaktywnie.com
 
 
 
 
© 2017 interaktywnie.com. All rights reserved. Created by Opcom