API Dynamic Library Import

L'API Dynamic Library Import è un nuovo modo per caricare l'API Maps JavaScript e tutte le librerie utilizzate. La possibilità di caricare dinamicamente librerie in fase di runtime ti consente di non doverti preoccupare delle dipendenze tra i componenti e consente il caricamento basato su promessa delle librerie. Ti consente inoltre di evitare l'uso di spazi dei nomi lunghi quando utilizzi l'API Maps JavaScript (gli spazi dei nomi lunghi vengono comunque completati e possono essere ancora utilizzati).

Utilizzare l'importazione della libreria dinamica

Per utilizzare l'API Dynamic Library Import, aggiungi un tag script per il bootstrap di caricamento incorporato nella pagina HTML e il codice di runtime per chiamare importLibrary() (per eseguire questa operazione puoi anche utilizzare il semplice caricatore di script; in questo caso, il codice dell'applicazione deve attendere il callback prima di utilizzare importLibrary). Copia il seguente codice, aggiungendo la chiave API e gli eventuali parametri di bootstrap necessari dall'applicazione:

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

Per caricare le librerie in esecuzione, usa l'operatore await per chiamare importLibrary() dall'interno di una funzione asincrona, come mostrato di seguito:

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();

Parametri obbligatori

• key: la tua chiave API. L'API Maps JavaScript non verrà caricata, a meno che non venga specificata una chiave API valida.

• v: "beta" Per l'anteprima, devi specificare il canale beta.

Parametri facoltativi

• libraries: un elenco separato da virgole di librerie aggiuntive di API JavaScript da caricare. In genere, si consiglia di non specificare un insieme fisso di librerie, ma è disponibile per gli sviluppatori che vogliono ottimizzare il comportamento della memorizzazione nella cache sul proprio sito web. Tuttavia, va notato che questo potrebbe causare un caricamento più lento se è necessaria una libreria non specificata.

• language: la lingua da utilizzare. Questo influisce sui nomi di controlli, notifiche di violazione del copyright, indicazioni stradali e etichette di controllo e risposte alle richieste di servizio. Consulta l'elenco delle lingue supportate.

• region: il codice regione da utilizzare. Questo modifica il comportamento della mappa in base a un determinato paese o territorio.

• solutionChannel: Google Maps Platform offre molti tipi di codice di esempio per aiutarti a iniziare subito. Per monitorare l'adozione dei nostri esempi di codice più complessi e migliorare la qualità della soluzione, Google include il parametro di ricerca solution_channel nelle chiamate API nel codice di esempio.

• authReferrerPolicy: i clienti di Maps JS possono configurare le restrizioni dei referrer HTTP in Cloud Console per limitare gli URL autorizzati a utilizzare una chiave API specifica. Per impostazione predefinita, queste limitazioni possono essere configurate in modo da consentire solo ad alcuni percorsi di utilizzare una chiave API. Se qualsiasi URL nello stesso dominio o nella stessa origine può utilizzare la chiave API, puoi impostare authReferrerPolicy: "origin" per limitare la quantità di dati inviati durante l'autorizzazione delle richieste dall'API Maps JavaScript. Se questo parametro è specificato e le limitazioni referrer HTTP sono attivate su Cloud Console, l'API Maps JavaScript potrà essere caricata solo se esiste una restrizione dei referrer HTTP che corrisponde al dominio del sito web attuale senza un percorso specificato.