close
mapy-google-ze-snazzy-maps

Tworząc stronę dla klienta, często będziesz musiał umieścić na niej mapę Google, szczególnie jeśli jest to działająca lokalnie firma. Domyślny styl mapy nie zawsze będzie pasował do kolorystyki strony. Mógłbyś skorzystać z dokumentacji Google i napisać style ręcznie, ale w przypadku większych zmian możesz się w tym pogubić.

Prostszym sposobem jest skorzystanie ze usługi Snazzy Maps, która pozwala na tworzenie i zapisywanie własnych skórek do map Google. W tym artykule zobaczysz jak można to zrobić.

Dodanie mapy Google

Zanim przejdziemy do zmiany stylów mapy, musimy utworzyć standardową mapę Google. Pobierzemy z Google Maps klucz API i napiszemy podstawową strukturę HTML.

Wygenerowanie klucza API

Zaczniejmy od wygenerowania klucza API. Przejdź na tę stronę i naciśnij przycisk GET A KEY. Otworzy się podobne okno:

wygeneruj api

Po wprowadzeniu nazwy projektu i kliknięciu Create and enable API, zostanie wygenerowany klucz API. Skopiuj go. Użyjemy go za chwilę.

Podstawowa struktura HTML

Utwórz nowy plik .html i napisz/skopiuj poniższą strukturę:

Div z id map stanie się później naszą mapą. W tym przykładzie rozciągamy ją na całą szerokość i wysokość ekranu, ale możesz ustawić dowolne rozmiary. W miejsce TWOJ_KLUCZ_API wklej wygenerowany wcześniej klucz. Jeśli z jakiegoś powodu nie mogłeś wygenerować klucza API, to zamień linię:

na:

Świetnie. Teraz możemy pomiędzy umieszczonymi poniżej znacznikami <script></script> dodać kod generujący mapę Google:

Ten kod utworzy standardową mapę. Poszczególne części opisane są w komentarzach. Otwórzmy teraz plik z mapą w przeglądarce. Zobaczysz podobny widok:

mapa bez snazzy

To oznacza, że udało nam się poprawnie dodać mapę. Możemy teraz przejść do zmiany styli w Snazzy Maps.

Rejestracja w Snazzy Maps

Kolejnym krokiem będzie rejestracja w Snazzy Maps. Posiadanie konta pozwoli nam na tworzenie własnych skórek i pobieranie innych. Przejdź na stronę rejestracji i wypełnij pola.

snazzy maps rejestracja

Po rejestracji zostaniesz automatycznie zalogowany. Teraz możesz przejść do zakładki EXPLORE i wybrać interesujący Cię styl mapy:

snazzy maps explore

W tym przykładzie wybiorę skórkę Assassin’s Creed IV, ale każda działa tak samo. Po kliknięciu na wybrany styl zobaczysz podobne okno:

assassin

Z lewej strony znajdziesz JSON, który zawiera style wybranej skórki. Możesz rozwinąć kod lub skopiować go klikając COPY CODE TO CLIPBOARD. Skopiuj cały kod i wróć do pliku z naszą mapą. Musimy teraz dodać kod JSON do opcji (zmienna mapOptions).

Po dodaniu skórki, mapOption będzie wyglądać tak:

Możemy odświeżyć teraz stronę. Zobaczymy mapę z dodanym stylem:

snazzy map

Tworzenie własnych skórek

Snazzy Maps umożliwia tworzenie własnych skórek. Ta opcja przydaje się szczególnie, jeśli chcemy dopasować kolorystykę mapy do konkretnej strony. Nowy styl można dodać przechodząc do zakładki CREATE.

snazzy maps create

Tutaj możemy wybrać jeden z 4 predefiniowanych stylów (default, light, dark, monochrome). Piąta opcja to JSON Import, która pozwala na wklejenie wcześniej wygenerowanej skórki i jej dalszą modyfikację.

Po wybraniu odpowiedniej opcji wystarczy kliknąć APPLY STYLE. Otworzy się edytor mapy. Tutaj możesz zmieniać style mapy i dopasować ją do potrzeb projektu:

snazzy maps edit

Po zakończonej edycji wystarczy kliknąć View code i pobrać kod, który następnie wkleisz w zmiennej mapOptions.

snazzy view code

 

Pobierz przykład

Tags : google mapssnazzy maps
  • Piotr Dobosiewicz

    od dawna już to przerabiam i zawsze pięknie się sprawdza!