API Dynamic Library Import

L'API Dynamic Library Import offre une nouvelle méthode pour charger l'API Maps JavaScript et toutes les bibliothèques associées. Grâce au chargement dynamique des bibliothèques lors de l'exécution, vous n'avez plus à vous soucier des dépendances multicomposants, et le chargement des bibliothèques est basé sur la promesse. De plus, vous n'avez pas besoin d'utiliser des espaces de noms longs avec l'API Maps JavaScript (toutefois, ils sont toujours insérés et peuvent encore être utilisés).

Utiliser l'importation dynamique de bibliothèques

Pour utiliser l'API Dynamic Library Import, ajoutez à votre page HTML une balise de script pour le chargeur d'amorçage intégré et un code d'exécution pour appeler importLibrary(). Pour ce faire, vous pouvez aussi utiliser le chargeur de script simple, mais votre code d'application doit alors attendre le rappel avant d'utiliser importLibrary. Copiez le code suivant (en ajoutant votre clé API) et tous les paramètres d'amorçage dont votre application a besoin :

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

Pour charger des bibliothèques lors de l'exécution, utilisez l'opérateur await pour appeler importLibrary() à partir d'une fonction asynchrone, comme indiqué ci-dessous :

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

Paramètres obligatoires

  • key : votre clé API (l'API Maps JavaScript ne se charge pas tant qu'aucune clé API valide n'est spécifiée)

  • v: "beta" (pour obtenir un aperçu, vous devez spécifier la version bêta)

Paramètres facultatifs

  • libraries : liste des bibliothèques supplémentaires de l'API Maps JavaScript à charger, séparées par une virgule. Généralement, il n'est pas recommandé de spécifier un ensemble défini de bibliothèques, mais cette option est disponible pour les développeurs qui souhaitent affiner le comportement de mise en cache sur leur site Web. Notez toutefois que cela peut ralentir le chargement si une bibliothèque non spécifiée est nécessaire.

  • language : langue à utiliser. Ce paramètre affecte le nom des commandes, les avis de droits d'auteur, les itinéraires, les libellés de commandes et les réponses aux demandes de service. Consultez la liste des langues acceptées.

  • region : code régional à utiliser. Ce paramètre modifie le comportement de la carte en fonction d'un pays ou d'un territoire donné.

  • solutionChannel : pour vous aider à démarrer rapidement, Google Maps Platform propose de nombreux types d'exemples de code. Pour suivre l'adoption de nos exemples de code plus complexes et améliorer la qualité de la solution, Google y inclut le paramètre de requête solution_channel dans les appels d'API.

  • authReferrerPolicy : les clients Maps JS peuvent configurer des restrictions d'URL de provenance HTTP dans la console Cloud afin de limiter les URL autorisées à utiliser une clé API donnée. Par défaut, ces restrictions peuvent être configurées pour n'autoriser que certains chemins à utiliser une clé API. Si une URL du même domaine ou de la même origine peut utiliser la clé API, vous pouvez définir authReferrerPolicy: "origin" pour limiter la quantité de données envoyées lors de l'autorisation des requêtes à partir de l'API Maps JavaScript. Lorsque ce paramètre est spécifié et que des restrictions d'URL de provenance HTTP sont activées dans la console Cloud, l'API Maps JavaScript ne peut être chargée que si une restriction d'URL de provenance HTTP correspond au domaine du site Web actuel sans chemin spécifié.