API de Dynamic Library Import

La API de Dynamic Library Import es una nueva manera de cargar la API de Maps JavaScript y todas las bibliotecas que lo acompañan. La posibilidad de cargar de forma dinámica las bibliotecas en el entorno de ejecución te permite eliminar la preocupación por las dependencias entre componentes y habilita la carga de bibliotecas basada en promesas. A su vez, te permite evitar el uso de espacios de nombres largos cuando usas la API de Maps JavaScript (los espacios de nombres largos aún se propagan y se pueden seguir utilizando).

Cómo utilizar Dynamic Library Import

Para utilizar la API de Dynamic Library Import, agrega una etiqueta de secuencia de comandos para el cargador de arranque intercalado a tu página HTML, y el código del entorno de ejecución a fin de llamar a importLibrary() (también puedes usar el cargador de secuencias de comandos simple, en cuyo caso, el código de la app debe esperar la devolución de llamada antes de usar importLibrary). Copia el siguiente código y agrega la clave de API y los parámetros de arranque que necesite tu app:

<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_HERE",
  v: "beta",
  // Add other bootstrap parameters as needed, using camel case.
});
</script>

Para cargar bibliotecas en el entorno de ejecución, usa el operador await a fin de llamar a importLibrary() desde una función asíncrona, como se indica a continuación:

let map;

async function initMap() {
    // Create the map.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"),{
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: 'DEMO_MAP_ID',
    });

    // Add an info window.
    const infoWindow = new InfoWindow({
        ariaLabel: "Googleplex",
    });

    // Add a marker.
    const {AdvancedMarkerView} = await google.maps.importLibrary("marker");
    const markerView = new AdvancedMarkerView({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: 'Googleplex, Mountain View CA'
    });

    markerView.addListener('click', () => {
        infoWindow.close();
        infoWindow.setContent('<b>Googleplex</b>, Mountain View CA');
        infoWindow.open(markerView.map, markerView);
    });
}

initMap();

Parámetros obligatorios

  • key: Es tu clave de API. La API de Maps JavaScript no se cargará si no se especifica una clave de API válida.

  • v: "beta": Para la vista previa, debes especificar el canal beta.

Parámetros opcionales

  • libraries: Incluye una lista separada por comas de bibliotecas adicionales de la API de Maps JavaScript que se cargarán. Por lo general, no se recomienda especificar un conjunto fijo de bibliotecas, pero esta opción está disponible para los desarrolladores que deseen definir con precisión el comportamiento del almacenamiento en caché en su sitio web. Sin embargo, recuerda que esto podría provocar que la carga sea más lenta si no se especifica una biblioteca.

  • language: Es el idioma que se usará. Este parámetro afecta los nombres de los controles, los avisos sobre derechos de autor, las rutas en auto y las etiquetas de control, así como las respuestas a las solicitudes de servicio. Consulta la lista de idiomas disponibles.

  • region: Es el código de la región que se usará. Esto modifica el comportamiento del mapa según el país o el territorio determinados.

  • solutionChannel: Google Maps Platform proporciona muchos tipos de códigos de muestra para ayudarte a comenzar rápidamente. Para realizar un seguimiento de la adopción de nuestras muestras de código más complejas y mejorar la calidad de las soluciones, Google incluye el parámetro de consulta solution_channel en las llamadas a la API en nuestro código de muestra.

  • authReferrerPolicy: Los clientes de Maps JS pueden configurar restricciones de URLs de referencia HTTP en la consola de Cloud para limitar las URLs que pueden usar una clave de API en particular. De forma predeterminada, estas restricciones se pueden configurar para permitir que solo ciertas rutas de acceso usen una clave de API. Si una URL con el mismo origen o dominio puede usar la clave de API, puedes configurar authReferrerPolicy: "origin" para limitar la cantidad de datos que se envían cuando se autorizan solicitudes de la API de Maps JavaScript. Cuando se especifica este parámetro y se habilitan las restricciones de URLs de referencia HTTP en la consola de Cloud, la API de Maps JavaScript solo podrá cargarse si hay una restricción de URLs de referencia HTTP que coincida con el dominio del sitio web actual sin una ruta especificada.