Библиотеки

Чтобы загрузить код JavaScript для Maps JavaScript API, добавьте на свою страницу скрипт начальной загрузки следующего вида:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Maps JavaScript API состоит из библиотек, которые загружаются только по прямому запросу. Разделение компонентов на библиотеки позволяет быстро загружать и выполнять синтаксическую проверку основного API. Загружайте и проводите синтаксическую проверку библиотек, только если это действительно нужно. При использовании динамического импорта библиотек встроенный начальный загрузчик по умолчанию не загружает никаких библиотек (даже core или maps). До вызова google.maps.importLibrary() не загружается ни одна часть Maps JavaScript API.

Чтобы загрузить библиотеку во время выполнения, используйте оператор await для вызова google.maps.importLibrary() из функции async. Предположите, что загружена только запрошенная библиотека, и вызовите google.maps.importLibrary() для каждой библиотеки, которую использует ваш код. Пример:

const { Map } = await google.maps.importLibrary("maps");

Ниже показан пример кода, который загружает библиотеки maps и marker, чтобы получить доступ к классам Map и AdvancedMarkerElement.

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

Доступные библиотеки

Для Dynamic Library Import и тега для прямой загрузки скрипта доступны следующие библиотеки:

Ниже приводится запрос начальной загрузки, в котором показано, как добавить запрос библиотеки google.maps.geometry из Maps JavaScript API в тег прямой загрузки скрипта.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>

Чтобы запросить несколько библиотек, их следует перечислить через запятую:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap">
</script>