Bibliotheken

Um den JavaScript-Code für die Maps JavaScript API zu laden, müssen Sie auf Ihrer Seite das Skript 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_HERE",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</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 AdvancedMarkerView-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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

Bibliotheken für Dynamic Library Import

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

Bibliotheken für Bootstrap-URL (alt)

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

Das folgende Beispiel zeigt, wie Sie die google.maps.geometry-Bibliothek der Maps JavaScript API im alten Skript des Bootstrap-Ladeprogramms anfordern:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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&libraries=geometry,places&callback=initMap">
</script>