Strona Główna » Konkurs » Materiały »
Nauka Google Maps API krok po kroku
W artykule pokazujemy jak zacząć korzystać z Google Maps API od skromnych początków i podstawowych funkcji do całkiem zaawansowanych aplikacji webowych. Polecamy jednak zapoznać się także z innymi materiałami udostępnionymi na stronie.
1. Uzyskanie dostępu do klucza Google Maps API:
https://developers.google.com/maps/documentation/javascript/get-api-key
2. Przygotowanie środowiska programistycznego:
- Środowisko lokalne: dowolny edytor tekstu, preferowanie kolorujący składnię. Na przykład: Notepad++, Brackets lub Visual Studio Code
- Środowisko zdalne: JSFiddle
W obu przypadkach wystarczy przeglądarka i wybrane przez nas środowisko. W pierwszym przypadku pliki będziemy przechowywać u siebie na komputerach, w drugim wszystko będzie robione zdalnie i nie trzeba nic instalować, ani pobierać.
3. Wygenerowanie pierwszej mapy:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
4. Agregowanie punktów w małej odległości od siebie:
https://developers.google.com/maps/documentation/javascript/marker-clustering
5. Wgrywanie danych zewnętrznych:
https://developers.google.com/maps/documentation/javascript/importing_data
6. Wizualizowanie danych:
https://developers.google.com/maps/documentation/javascript/earthquakes
7. Opracowanie prezentacji kartograficznej:
https://developers.google.com/maps/documentation/javascript/styling
8. Przygotowanie interfejsu do kontroli mapy:
https://developers.google.com/maps/documentation/javascript/controls
9. Obsługiwanie zdarzeń (reakcje mapy na działanie użytkownika):
https://developers.google.com/maps/documentation/javascript/events
10. Umieszczanie informacji opisowych dla obiektów na mapie:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
11. Rysowanie po mapie:
https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
12. Wyszukiwanie miejsc i adresów:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
13. Wyznaczanie tras:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions