Bibliotecas

Para cargar el código JavaScript de la API de Maps JavaScript, tú incluye una secuencia de comandos del cargador de arranque en tu página con el siguiente formato:

<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>

La API de Maps JavaScript consta de bibliotecas que no se cargan hasta que las solicitas específicamente. El desglose de los diferentes componentes en bibliotecas permite que la API se cargue y analice rápidamente, por lo que solo tienes la tarea adicional de cargar y analizar bibliotecas si las necesitas. Cuando se usa la importación dinámica de bibliotecas, el cargador de arranque intercalado no carga ninguna biblioteca de forma predeterminada (ni siquiera core o maps); antes de llamar a google.maps.importLibrary(), no se carga ninguna parte de la API de Maps JavaScript.

Si deseas cargar una biblioteca en tiempo de ejecución, usa el await operador para llamar google.maps.importLibrary() desde una función async. Supón que solo se carga la biblioteca solicitada y llama google.maps.importLibrary() para cada biblioteca que use tu código. Por ejemplo:

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

En el siguiente ejemplo de código, se muestra cómo cargar las bibliotecas maps y marker para acceder a las clases Map y 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();

Bibliotecas disponibles

Las siguientes bibliotecas están disponibles para usarse con la importación dinámica de bibliotecas y la etiqueta de carga directa de secuencias de comandos:

En la siguiente solicitud de arranque, se muestra cómo agregar una solicitud a la google.maps.geometry biblioteca de la API de Maps JavaScript a la etiqueta de carga directa de secuencias de comandos:

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

Para solicitar varias bibliotecas, sepáralas con una coma:

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