Bibliothèques

Afin de charger le code JavaScript pour l'API Maps JavaScript, vous devez inclure un script de chargement d'amorçage sur votre page, au format suivant :

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

L'API Maps JavaScript est constituée de bibliothèques qui ne sont pas chargées, à moins d'envoyer une requête spécifique à cet effet. Diviser les composants en bibliothèques permet à l'API de charger et d'analyser rapidement, de sorte que vous n'entraînez une surcharge supplémentaire que lorsqu'une bibliothèque dont vous avez besoin doit être chargée et analysée. Lorsque vous utilisez l'importation dynamique de bibliothèques, le chargeur d'amorçage intégré ne charge aucune bibliothèque par défaut (pas même core ni maps). Avant d'appeler google.maps.importLibrary(), aucune partie de l'API Maps JavaScript n'est chargée.

Pour charger une bibliothèque lors de l'exécution, utilisez l'opérateur await afin d'appeler google.maps.importLibrary() à partir d'une fonction async. Partez du principe que seule la bibliothèque demandée est chargée et appelez google.maps.importLibrary() pour chaque bibliothèque utilisée par votre code. Exemple :

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

L'exemple de code suivant illustre le chargement des bibliothèques maps et marker pour accéder aux classes Map et 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();

Bibliothèques disponibles

Les bibliothèques suivantes peuvent être utilisées avec l'importation dynamique de bibliothèques et la balise de chargement direct de script :

La requête d'amorçage suivante montre comment ajouter une requête pour la google.maps.geometry bibliothèque de l'API Maps JavaScript à la balise de chargement direct de script :

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

Pour demander plusieurs bibliothèques, séparez-les par une virgule :

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