www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Dodanie wskaźnika ładowania mapy

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

W tej części kursu poznasz prosty sposób na dodanie wskaźnika, informującego o ładowaniu mapy.

Niestety, nie jest możliwe sprawdzenie stanu załadowania obrazów ze zdjęciami / mapą. Zamiast tego posłużymy się małym trickiem. Ustawimy obrazek, informujący o ładowaniu jako tło mapy. Będzie ono widoczne, jeśli obrazki nie zostały jeszcze załadowane - kiedy się załadują, zakryją napis "ładowanie".

Realizacja

Stwórz plik graficzny w dowolnym formacie z informacją o ładowaniu. Jeśli lubisz animowane ikonki, polecam użycie serwisu www.ajaxload.info, gdzie znajdziesz bardzo przydatny generator estetycznych pasków ładowania. Ja wygenerowałem taki obrazek:

Ładowanie

Aby dodać obrazek do mapy, należy ustawić odpowiedni styl CSS dla elementu, w którym jest mapa. Przykładowy kod:

<div id="mapka" style="width: 700px; height: 500px; background-color: white; background-image: url('http://gmapsapi.com/images/ladowanie.gif'); background-position: center; background-repeat: no-repeat;"></div>

Innymi słowy, poza standardowym ustawieniem szerokości i wysokości, definiujemy też kolor tła (background-color, ustaw na taki kolor tła swojego obrazka), jego położenie (background-position), oraz oczywiście adres URL (background-image). Po takiej operacji, przy ładowaniu obrazków mapy będzie widoczna odpowiednia animacja - sprawdź to na przykładzie 1 przykład 1pokaż kod przykładu

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Kategorie markerów i polilinii

API v2

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


jQuery i Google Maps

API v2

Przyjemne dla oka animacje za pomocą bilbioteki jQuery uatrakcyjnią każdą mapę!


Wyszukiwanie markerów as-you-type

API v2

Jak stworzyć wyszukiwanie i filtrowanie markerów as-you-type przy użyciu bazy danych