Google Map Builder – stwórz niestandardową mapę Google

Iteratywna mapka Google umieszczona obok danych kontaktowych jest już od dawna standardem, który posiada większość stron firmowych. Dzięki pokazaniu lokalizacji firmy za pośrednictwem Google Maps dajemy możliwość łatwej lokalizacji siedziby firmy lub punktu usługowego potencjalnym klientom. Dzięki dodaniu adresu firmy do bazy danych możemy np. jednym kliknięciem ustawić go jako miejsce docelowe nawigacji. Mapy Google to naprawdę rozbudowane narzędzie, które posiada szereg opcji, dzięki którym możemy dostosować widok mapy do swoich potrzeb.

Nie wiele osób wie, że mapa umieszczona na stronie (za pośrednictwem kodu wygenerowanego przez aplikację), to tylko namiastka tego, co możemy zrobić z mapami. Niestety zmiana znacznika mapy, czy np. zaznaczenie kolorem obszaru parkingu firmowego, to zadanie które wymaga co najmniej podstawowej znajomości programowania w JavaScript. Z pomocą przychodzi nam narzędzie Google Map Builder, które pozwala na stworzenie dostosowanej mapy zaledwie przy pomocy kilku kliknięć. Za pomocą prostego interfejsu, składającego się z kilku prostych formularzy stworzysz swoją spersonalizowaną mapkę bez konieczności napisania chociażby linijki kodu.

Przegląd możliwości dostosowania mapy

Omawiane narzędzie zostało wyposażone w przyjemny dla oka interface , który pozwala na wykorzystanie wielu możliwości dostosowania parametrów mapy dostępnych przez Googla Maps API. Wszystkie opcje zorganizowane zostały w postaci czytelnych formularzy. Są one zlokalizowane w sidebarze po lewej stronie okna. Zmieniając parametry widzimy (bez konieczności odświeżania) jak zmienia się mapa na podglądzie po prawej stronie.

GoogleMapBuilderZ podstawowych parametrów mapy mamy do wyboru taki opcje jak:

  • szerokość i wysokość mapy (wyrażona w pikselach lub %)
  • współrzędne geograficzne środka mapy
  • początkowa wartość przybliżenia mapy

Możemy również dodać tzw. API key za pomocą którego będziemy mieli możliwość monitorowania użycia mapy przez osoby odwiedzające naszą stronę.

Dodawanie lokalizacji

GoogleMapBuilder-opcje

Poniżej znajdują się pola, dzięki którym dodamy do mapy to co interesuje nas najbardziej – lokalizacje. Mamy możliwość dodania kilu różnych lokalizacji (np. sieć restauracji) w raz z ich szczegółowym opisem. Przy pomocy kolejnego formularza oprócz adresu rozbudujemy opis lokalizacji o takie pola jak:

  • tytuł
  • nr telefonu
  • adres email
  • stronę www
  • i krótki opis

GoogleMapBuilder-lokacje

Podane informacje wyświetlą się w chmurce po kliknięciu na marker dodanego przez nas miejsca. To czy dana informacja ma zostać wyświetlona, możemy ustawić przy pomocy opcji zlokalizowanych poniżej sekcji dodawania lokalizacji. Możemy też całkowicie zrezygnować z wyświetlania chmurki.

Wybór markera

Google Map Builder posiada również opcję ustawienia niestandardowego markera lokalizacji. Możemy wybierać z kilku predefiniowanych znaczników lub zaimportować plik graficzny, który zostanie wyświetlony na wygenerowanej mapie. Dobrze wykonany, niestandardowy znacznik sprawi, że lokalizacja na mapie stanie się łatwiej zauważalna. Warto również spróbować użyć np. logotypu firmowego do zaznaczenia lokalizacji firmy. Możliwości jest wiele.

GoogleMapBuilder-marker

Opcje wyświetlania mapy

Przeglądając kolejne dostępne ustawienia zauważymy opcje dostosowania interfejsu mapy. Możemy tutaj zdecydować, które paski nawigacyjne mają być wyświetlane, wybrać rodzaj widoku (teren, mapa drogowa, satelita, hybrydowy) czy na przykład wyłączyć możliwość przeciągania mapy myszą. Ustawień jest na prawdę sporo i warto poeksperymentować.

Motywy

Natomiast najciekawszą opcją wydaje się możliwość zastosowania kilkudziesięciu predefiniowanych motywów graficznych. Motywy  Dzięki nim nasza mapa może zastać oryginalny wygląd. Poniżej kilka szablonów, które moim zdaniem wyglądają co najmniej nieźle.

Blue Water
GoogleMapBuilder-blue-waterHoliday

GoogleMapBuilder-holiday

Hard Edges

GoogleMapBuilder-hard-edges

 

Eksport kodu

Po stworzeniu docelowej mapy narzędzie daje nam możliwość pobrania gotowego kodu do wklejenia na naszej stronie. Po kliknięci w przycisk „Get Code” kod zawierający mieszankę JavaScriptu, css-a i html-a pojawi się po lewej strony w miejscu mapy.

GoogleMapBuilder-eksport-kodu

Na tym kończy się nasza praca i możemy cieszyć się niestandardową i oryginalnie wyglądającą mapą na stworzonej przez nas stronie.

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *