Dynamic Library Import API

Die Dynamic Library Import API bietet eine neue Möglichkeit, die Maps JavaScript API und alle zugehörigen Bibliotheken zu laden. Da Bibliotheken zur Laufzeit dynamisch geladen werden können, brauchen Sie sich keine Gedanken über komponentenübergreifende Abhängigkeiten zu machen. Außerdem wird ein promisebasiertes Laden von Bibliotheken möglich. Darüber hinaus lassen sich bei Verwendung der Maps JavaScript API lange Namespaces vermeiden. Diese werden allerdings weiterhin ausgefüllt und können bei Bedarf genutzt werden.

Dynamic Library Import API verwenden

Wenn Sie die Dynamic Library Import API verwenden möchten, fügen Sie Ihrer HTML-Seite ein Skript-Tag für das Inline-Bootstrap-Ladeprogramm und Laufzeitcode für den Aufruf von importLibrary() hinzu. Sie können hierfür auch das einfache Ladeprogramm für das Skript nutzen. In diesem Fall muss Ihr Anwendungscode auf die Callback-Funktion warten, bevor importLibrary verwendet werden kann. Kopieren Sie den folgenden Code und fügen Sie Ihren API-Schlüssel sowie alle Bootstrap-Parameter in den Code ein, die für Ihre Anwendung erforderlich sind:

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

Wenn Sie Bibliotheken während der Laufzeit laden möchten, verwenden Sie den Operator await, um importLibrary() innerhalb einer asynchronen Funktion aufzurufen:

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

Erforderliche Parameter

  • key: Die Maps JavaScript API wird nur geladen, wenn Sie einen gültigen API-Schlüssel angeben.

  • v: "beta": Für die Vorschau müssen Sie die Betaversion festlegen.

Optionale Parameter

  • libraries: Eine durch Kommas getrennte Liste zusätzlicher Maps JavaScript API-Bibliotheken, die geladen werden können. Generell empfiehlt es sich nicht, einen festen Satz von Bibliotheken anzugeben. Entwickler, die das Caching auf ihrer Website genau steuern möchten, können dies jedoch tun. Allerdings kann dies zu längeren Ladezeiten führen, falls eine Bibliothek benötigt wird, die nicht angegeben ist.

  • language: Die Sprache, die verwendet werden soll. Sie wirkt sich auf die Namen und Labels von Steuerelementen, Urheberrechtshinweise, Wegbeschreibungen und Antworten auf Dienstanfragen aus. Hier finden Sie eine Liste der unterstützten Sprachen.

  • region: Der zu verwendende Regionscode. Dadurch wird das Verhalten der Karte an das jeweilige Land oder Gebiet angepasst.

  • solutionChannel: Auf der Google Maps Platform stehen zahlreiche Arten von Beispielcode für einen schnellen Einstieg zur Verfügung. Um die Verwendung der komplexeren Codebeispiele zu verfolgen und die Qualität der Lösungen zu verbessern, fügt Google den Abfrageparameter solution_channel in die API-Aufrufe in den Beispielcodes ein.

  • authReferrerPolicy: Maps JS-Kunden können in der Cloud Console Einschränkungen für HTTP-Verweis-URLs konfigurieren, um festzulegen, für welche URLs ein bestimmter API-Schlüssel verwendet werden darf. Diese Einschränkungen können standardmäßig so konfiguriert werden, dass nur bestimmte Pfade einen API-Schlüssel verwenden dürfen. Wenn der API-Schlüssel von jeder URL derselben Domain oder desselben Ursprungs verwendet werden kann, können Sie den Parameter authReferrerPolicy: "origin" definieren und so die Datenmenge begrenzen, die bei der Autorisierung von Anfragen von der Maps JavaScript API gesendet wird. Wenn dieser Parameter definiert ist und Einschränkungen vom Typ „HTTP-Verweis-URLs“ in der Cloud Console aktiviert sind, kann die Maps JavaScript API nur auf Seiten mit der Domain der aktuellen Website geladen werden, auf die der Zugriff beschränkt ist (ohne Pfadangabe).