Zespół Google wprowadził 3 nowości dotyczące ładowania Maps JavaScript API! Firma stworzyła API do elastycznego ładowania bibliotek. Kolejnymi nowościami są nowa, wbudowana ładowarka bootstrap oraz usprawnienia wydajności.
Elastyczne ładowanie bibliotek Maps JavaScript API
Maps JavaScript API jest zbudowane z bibliotek wybieranych przez developerów w trakcie ładowania API. Biblioteki są potrzebne w celu wyświetlania map na stronach internetowych, ale nie tylko. Przykładowo, aby zyskać dostęp do Places API, developerzy mogą w tym celu także załadować bibliotekę Places. Dotychczas ładowanie bibliotek było mało elastyczne i powodowało opóźnienia, ponieważ mogły być one wybrane przez developerów tylko w momencie załadowania się Maps JavaScript API, np. poprzez parametr „libraries=places URL”.
Teraz, Google udostępnia API służące dynamicznemu importowaniu bibliotek, na przykład:
await google.maps.importLibrary("places");)…załaduje bibliotekę Places, kiedy tylko uznasz, że jest to potrzebne, np. po tym, jak użytkownik Twojej strony wykona akcję, która wymaga pokazania informacji o miejscach na mapie. Co więcej, od teraz możemy uniknąć używania długich przestrzeni nazw, takich jak google.maps.places.Place poprzez…
const {Place} = await google.maps.importLibrary("places");(mimo tej zmiany, przestrzeń nazwy google.maps.places dalej pozostanie wypełniana).
Nowością jest też importowanie wielu bibliotek na raz:
const [placesLibrary, geocodingLibrary] = await Promise.all([
google.maps.importLibrary("places"),
google.maps.importLibrary("geocoding")
]);Wszystkie klasy Maps JavaScript API są dostępne poprzez google.maps.importLibrary(), tak jak podano w dokumentacji. Przykładowo, możesz uzyskać dostęp do klasy StreetViewPanorama class poprzez…
const {StreetViewPanorama} = await google.maps.importLibrary("streetView");Możesz też kontrolować moment ładowania zależności Maps JavaScript API.
Nowa ładowarka bootstrap
Google rozwiązało jeszcze jeden częsty problem – korzystanie z ładowarki Maps JavaScript API <script> wymaga określenia parametru zwrotnego dla globalnie zdefiniowanej funkcji. Zamiast tego, Google zaleca, by developerzy używali nowej, wbudowanej ładowarki bootstrap. Pozwala ona od razu skorzystać z google.maps.importLibrary(), bez potrzeby czekania na załadowanie się API. Dzięki temu, unikniemy określania parametru zwrotnego, natomiast możemy skorzystać z funkcji „Promises” lub async/await by wiedzieć, kiedy Maps JavaScript API jest już gotowe.
Zamiast określania tagu <script> poprzez URL, możesz użyć ładowarki bootstrap – krótkiego kodu JavaScript. Pobiera on Twoje parametry konfiguracji i tworzy URL bootstrap, a także definiuje google.maps.importLibrary(), więc od razu możesz zacząć z niej korzystać. Maps JavaScript API nie zostaje załadowane, dopóki nie wywołasz google.maps.importLibrary(). Wbudowana ładowarka bootstrap może być bezpiecznie użyta wiele razy na jednej stronie internetowej, ale zadziała tylko jej pierwsza konfiguracja. Dzięki ładowarce, google.maps.importLibrary() Promise poprawnie wskaże, jeśli pojawi się problem w ładowaniu Maps JavaScript API.
Usprawnienia wydajności
W tym roku, Google wprowadziło także kilka zmian w Maps JavaScript API, które automatycznie skracają czas ładowania map dla użytkowników końcowych. Zespół wprowadził kompresję Brotli (algorytm stworzony przez Google) dla statycznych plików JavaScript, a także automatyczne lazy loading (opóźnione ładowanie) dla map nieznajdujących się na ekranie. Jeszcze w 2023, Google planuje upgrade JavaScript, który obejmie wprowadzenie nowocześniejszego kodu wyjściowego. Tym samym, nastąpi redukcja wielkości plików i możliwe będzie wykorzystanie większej ilości funkcji wbudowanych w przeglądarce.
Ładowarka <script> a manager pakietów npm
Niektórzy developerzy szukają sposobu na ładowanie pakietów JavaScript i uzyskiwanie dostępu do API poprzez managera pakietów npm. Na tę chwilę, w tym celu wykorzystuje się ładowarkę <script>, jednak Google udostępnia pośrednie rozwiązanie – pakiet @googlemaps/jas-api-loader. Możesz skorzystać z nowego polecenia google.maps.importLibrary() razem z js-api-loader poprzez Loader.importLibrary().
Developerom, którzy chcą uzyskać więcej kontroli nad tym, kiedy wdrażają nowe wersje Maps JavaScript API, polecamy sprawdzenie opcji na stronie Google. Obecnie, każda z nowych wersji Maps JavaScript API jest dostępna przez rok od wydania.
Jeśli chcesz dowiedzieć się więcej o Maps JavaScript API, skontaktuj się z naszymi ekspertami Google!
Tekst źródłowy: https://cloud.google.com/blog/products/maps-platform/more-control-loading-maps-javascript-api