Dodanie wskaźnika ładowania mapy
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:
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