Bibliotheken

Um den JavaScript-Code für die Maps JavaScript API zu laden, müssen Sie auf Ihrer Seite das Script eines Bootstrap-Ladeprogramms in folgender Form einfügen:

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

Die Maps JavaScript API besteht aus Bibliotheken, die erst geladen werden, wenn Sie sie ausdrücklich anfordern. Durch das Aufteilen von Komponenten in Bibliotheken kann die API schnell geladen und geparst werden. Zusätzlicher Aufwand durch das Laden und Parsen von Bibliotheken entsteht nur, wenn Sie sie wirklich benötigen. Bei der Verwendung des dynamischen Bibliotheksimports werden vom Inline-Bootstrap-Ladeprogramm standardmäßig keine Bibliotheken geladen (nicht einmal core oder maps). Vor dem Aufruf von google.maps.importLibrary() wird kein Teil der Maps JavaScript API geladen.

Wenn Sie eine Bibliothek während der Laufzeit laden möchten, verwenden Sie den await Operator, um google.maps.importLibrary() innerhalb einer async Funktion aufzurufen. Gehen Sie davon aus, dass nur die angeforderte Bibliothek geladen wird, und rufen Sie google.maps.importLibrary() für jede Bibliothek auf, die in Ihrem Code verwendet wird. Beispiel:

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

Im folgenden Codebeispiel werden die maps und marker Bibliotheken geladen, um auf die Map und AdvancedMarkerElement Klassen zuzugreifen:

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

Verfügbare Bibliotheken

Die folgenden Bibliotheken können mit dynamischem Bibliotheksimport und direktem Skript-Tag verwendet werden:

Das folgende Beispiel zeigt, wie Sie die Bibliothek google.maps.geometry der Maps JavaScript API im direkten Skript-Tag anfordern:

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

Falls Sie mehrere Bibliotheken anfordern möchten, trennen Sie diese durch Kommas:

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