Google Maps w aplikacji

Wczoraj zrobiłem drobny research i sprawdziłem na ile skomplikowane będzie używanie Google Maps w Angularze. Okazuje się, że sprawa jest dosyć prosta, więc postanowiłem od razu wstawić mapy do mojej aplikacji. W kwestii przypomnienia, w mojej wyimaginowanej aplikacji użytkownik powinien mieć możliwość wybrania trasy, czyli dwóch punktów na mapie więc idealnie byłoby gdyby mógł od razu widzieć swój wybór. Z tego powodu mam na celu „rysowanie” po mapie, co oczywiście umożliwia nam Google Maps API.

Należy pobrać moduł NPM o nazwie @agm/core. Nazwa to skrót od Angular Google Maps. Co zabawne, jeszcze dokładnie wczoraj moduł nazywał się zupełnie inaczej (angular2-google-maps). Okazało się, że autor w momencie pisania przeze mnie tego posta postanowił zmienić nazwę zgodnie z nową konwencją, że wersja Angulara nie jest już zawierana w żadnych nazwach głównej biblioteki oraz paczek pomocniczych Wspominałem o tym w poprzednim wpisie.

Zmiana oczywiście na dobre, ale kosztowała mnie godzinę czasu, ponieważ swój testowy kod miałem jeszcze ze starą nazwą biblioteki i dzisiaj po przeniesieniu go do aplikacji i odświeżeniu modułów NPM mapy przestały działać. Zanim doszedłem do tego co się tak naprawdę stało, minęła właśnie niecała godzina. Szkoda, że błędy, które wyświetlała mi sama biblioteka nie były w stanie mnie naprowadzić do żadnych sensownych wniosków. No trudno, może dożyję dnia gdy jakiś komunikat o błędzie będzie użyteczny. 🙂

Na szczęście wszystko już działa i mogę używać map google. Na start dodałem prostą mapę ustawioną w okolice legendarnej w niektórych kręgach miejscowości Pyzdry. W następnym kroku mam zamiar podpiąć mapę i znaczniki na niej do pól tekstowych z kodami pocztowymi. Samo użycie biblioteki (po oczywiście zaimportowaniu modułu) jest banalnie proste, a od dzisiejszej zmiany nazw dyrektyw są nawet krótsze, co również jest na plus.

Oczywiście zmienne lat oraz lng są zdefiniowane w klasie komponentu i są one typu number. Długości geograficzne można łatwo odczytać w sieci, używając chociażby samego google maps.