Kütüphaneler

Maps JavaScript API'nin JavaScript kodunu yüklemek için 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, kitaplıklardan oluşur ve siz özellikle istemediğiniz sürece bu kitaplıklar yüklenmez. Bileşenleri kitaplıklara ayırmak, API'nin hızlı bir şekilde yüklenmesini (ve ayrıştırılmasını) sağlar. Yalnızca ihtiyaç duyduğunuzda kitaplıkları yükleme ve ayrıştırma ek yükünü üstlenirsiniz.

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

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

Aşağıdaki kod örneğinde hem Map hem de AdvancedMarkerElement kitaplıklarının nasıl yükleneceği 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

Kullanılabilen Kitaplıklar

Aşağıdaki kitaplıklar, dinamik kitaplık içe aktarma ve doğrudan komut dosyası yükleme etiketi ile kullanılabilir:

Aşağıdaki başlatma isteği, Maps JavaScript API'nin google.maps.geometry kitaplığına yönelik bir isteğin doğrudan komut dosyası yükleme etiketine nasıl ekleneceğini gösterir:

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

Birden fazla kitaplık istemek için bunları virgülle ayırın:

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