Tým Google představil významná vylepšení rozhraní JavaScript API Mapy! Patří mezi ně rozhraní API pro dynamické načítání knihoven, inline bootstrap loader a různá vylepšení výkonu.
Zlepšené načítání knihoven
Rozhraní API Mapy JavaScript se skládá z knihoven, které vývojáři zahrnují při načítání rozhraní API. Dříve bylo načítání knihoven nepružné, což ovlivňovalo počáteční časy načítání. Vývojáři mohli zadávat knihovny pouze během počátečního načítání pomocí parametrů jako ‘libraries=places‘ v adrese URL.
Nyní rozhraní API umožňuje dynamický import knihoven. Například:
await google.maps.importLibrary("places");)Knihovna míst se načte v případě potřeby, například poté, co uživatelská akce vyvolá potřebu získat informace o místě. Kromě toho se lze vyhnout dlouhým jmenným prostorům, jako je ‘google.maps.places.Place‘:
const {Place} = await google.maps.importLibrary("places");Současně lze importovat více knihoven:
const [placesLibrary, geocodingLibrary] = await Promise.all([
google.maps.importLibrary("places"),
google.maps.importLibrary("geocoding")
]);Všechny třídy rozhraní API Mapy JavaScript jsou přístupné prostřednictvím funkce google.maps.importLibrary(). Například třída StreetViewPanorama je přístupná pomocí:
const {StreetViewPanorama} = await google.maps.importLibrary("streetView");Inline bootstrap zavaděč
Tradiční načítání <script> pro rozhraní API Mapy JavaScript vyžadovalo definování parametru zpětného volání globální funkce. Doporučuje se nový inline zavaděč, který umožňuje okamžité použití funkce google.maps.importLibrary() bez čekání na načtení rozhraní API. Tím se eliminuje potřeba globálních zpětných volání, což umožňuje sledování připravenosti rozhraní API pomocí funkce Promises nebo async/await.
Namísto značky <script> s adresou URL je tento inline zavaděč malým kouskem inline jazyka JavaScript. Využívá vaše konfigurační parametry, konstruuje adresu URL bootstrapu a definuje funkci google.maps.importLibrary(), čímž zajišťuje, že se nenačtou žádné komponenty API, dokud není nejprve vyvolána funkce google.maps.importLibrary().
Zaváděcí modul inline lze na jedné stránce použít vícekrát, ale platí pouze první konfigurace. Důležité je, že metoda the google.maps.importLibrary() Promise správně odmítá při problémech s načítáním API, na rozdíl od starší metody zpětného volání.
Zlepšení výkonu
V letošním roce bylo provedeno několik změn v rozhraní API JavaScriptu Mapy, které zlepšily dobu načítání pro uživatele. Na statické soubory JavaScriptu se používá komprese Brotli a mapy mimo obrazovku se načítají automaticky. Plánují se další vylepšení, včetně modernizace výstupu JavaScriptu s cílem snížit velikost souboru využitím funkcí zabudovaných v prohlížeči.
Why <script> loader?
The Maps JavaScript API is distributed via <script> tags instead of npm distribution. This choice accommodates a broad range of websites, including those not actively maintained. Changes in browsers and backend services require updates, addressing accessibility, privacy, and security concerns. Direct loading from Google ensures automatic updates, avoiding unexpected disruptions. For a middle ground, the ‘@googlemaps/js-api-loader’ package bridges <script> loading and npm. The new google.maps.importLibrary() is compatible with js-api-loader via Loader.importLibrary().
Pokud se chcete o rozhraní JavaScript API Mapy dozvědět více, kontaktujte naše odborníky na Google Mapy!
Zdroj: https://cloud.google.com/blog/products/maps-platform/more-control-loading-maps-javascript-api