Wyświetl większą Mapę Google

Usługa Google Maps API umożliwia umieszczenie interaktywnej Mapy Google na własnej stronie internetowej, np. prostej mapki z danymi kontaktowymi firmy ale także w pełni funkcjonalnej mapy, z własnymi danymi i funkcjami do obsługi zdarzeń. Jest to możliwe poprzez wklejenie do kodu swojej strony odpowiedniego kodu języka JavaScript wraz z tzw. kluczem API. Klucz, który może uzyskać każdy użytkownik konta Google, pozwala na dostęp z jednej domeny lub katalogu domeny.

Obecnie usługa Google Maps API jest bardzo rozbudowana i dostępna jest także na urządzenia mobilne. Usługa jest darmowa do określonego limitu odwiedzin strony lub aplikacji. Wysokość ustalonego limitu zależy od tego dla jakiego urządzenia dedykowana jest usługa. Dla stron internetowych wynosi on 25 tys. odwiedzin dziennie.

Stanie w korkach to bolączka nie jednego kierowcy. Zanim wsiądziemy do auta warto na Mapach Google sprawdzić korki i wyświetlić warstwę natężenie ruchu na drodze.

Prędkość pojazdów pokazana jest kolorami. Zielony: ruch odbywa się płynnie. Pomarańczowy: średnie natężenie ruchu. Czerwony: opóźnienia w ruchu. Im ciemniejszy czerwony, tym ruch jest wolniejszy.

Na mapie zaznaczone są również zdarzenia drogowe. Obejmują one kilka rodzajów sytuacji, które powodują opóźnienia: wypadki, Wypadki, roboty drogowe, Roboty drogowe, zamknięcia dróg, Zamknięte odcinki drogi, inne zdarzenia. W przypadku zamkniętej drogi pojawi się przerywana czerwona linia na odcinku, który jest zamknięty.

Poniżej przyklad mapy z markerem, po kliknięciu którego wyskakuje okno z informacjami. W takim oknie możemy umieścić zwykły tekst, ale także obraz czy link.

Wyświetl mapę na osobnej stronie

Klikajac w marker otworzy się okno. Domyślnie pozostaje otwarte, dopóki użytkownik nie kliknie kontrolki zamknięcia (krzyżyka w prawym górnym rogu okna informacyjnego).

Do stworzenia takiej mapy potrzebne będzie wywołanie funkcji InfoWindow. W tym przykładzie pokazujemy jak podpiąć okno informacyjne do markera, ale możesz je również dołączyć do określonej szerokości/długości geograficznej, wywołując funkcję setPosition ().

W kolejnej częsci naszego kursu Google Maps API zobaczysz jak umieścić na stronie prostą mapę Google z markerem. To nic trudnego. Poradzisz sobie, jeśli tylko masz podstawową wiedzę z HTML i CSS oraz choć minimalną znajomością JavaScript.

  • Jesteś tutaj:  
  • Start