Kütüphaneler

Maps JavaScript API için JavaScript kodunu yüklemek amacıyla sayfanıza aşağıdaki biçimde bir bootstrap yükleyici komut dosyası ekleyin:

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

Maps JavaScript API, siz özel olarak istekte bulunana kadar yüklenmeyen kitaplıklardan oluşur. Bileşenleri kitaplıklara ayırmak, API'nin hızlı bir şekilde yüklenmesini (ve ayrıştırılmasını) sağlar. Kitaplıkları yalnızca ihtiyaç duyduğunuzda yüklemek ve ayrıştırmak için ek ücret ödersiniz.

Bir async işlevi içinden importLibrary() çağrısı yapmak için await operatörünü kullanarak çalışma zamanında ek kitaplıklar yükleyin. Örneğin:

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

Aşağıdaki kod örneğinde hem Map hem de AdvancedMarkerElement kitaplıklarının yüklenmesi gösterilmektedir:

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

Dinamik Kitaplık İçe Aktarma için Kitaplıklar

Aşağıdaki kitaplıklar Dinamik Kitaplık İçe Aktarma ile kullanılabilir:

Önyükleme URL'si için kitaplıklar (eski)

Aşağıdaki kitaplıkların eski önyükleme komut dosyası etiketiyle kullanılması desteklenir:

Aşağıdaki önyükleme isteği, Maps JavaScript API'nin google.maps.geometry kitaplığı için eski önyükleme yükleyicisi komut dosyasına nasıl istek ekleneceğini göstermektedir:

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

Birden fazla kitaplık isteğinde bulunmak için kitaplıkları virgülle ayırın:

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