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.

Verwenden Sie den Operator await, um importLibrary() innerhalb einer async-Funktion aufzurufen und zusätzliche Bibliotheken während der Laufzeit zu laden. Beispiele:

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

Im folgenden Codebeispiel wird gezeigt, wie die Map- und AdvancedMarkerElement-Bibliotheken geladen werden:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

Bibliotheken für Dynamic Library Import

Die folgenden Bibliotheken können mit Dynamic Library Import verwendet werden:

Bibliotheken für Bootstrap-URL (Legacy)

Die folgenden Bibliotheken können mit dem Legacy-Bootstrap-Skript-Tag verwendet werden:

Das folgende Beispiel zeigt, wie Sie die google.maps.geometry-Bibliothek der Maps JavaScript API im Legacy-Script des Bootstrap-Ladeprogramms 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>