Kütüphaneler

Maps JavaScript API'ye ilişkin JavaScript kodunu yüklemek için sayfanıza aşağıdaki biçimde bir bootstrap yükleyici komut dosyası eklersiniz:

<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, özel olarak talep edene kadar yüklenmeyen kitaplıklardan oluşur. Bileşenleri kitaplıklara ayırmak, API'nin hızlı bir şekilde yüklenmesini (ve ayrıştırmasını) sağlar. İhtiyaç duyduğunuzda yalnızca kitaplıkların yüklenmesi ve ayrıştırılması için ek ücret ödersiniz.

importLibrary() işlevini bir async işlevi içinden çağırmak 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ığı İçe Aktarma İçin Kitaplıklar

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

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

Aşağıdaki kitaplıkların eski bootstrap komut dosyası etiketiyle kullanılması desteklenir:
  • drawing, kullanıcıların harita üzerinde poligon, dikdörtgen, çoklu çizgi, daire ve işaretçi çizmesi için grafik bir arayüz sağlar. Daha fazla bilgi için Çizim kitaplığı dokümanlarına bakın.
  • geometry, dünya yüzeyindeki skaler geometrik değerleri (mesafe ve alan gibi) hesaplamak için yardımcı program işlevleri içerir. Daha fazla bilgi için Geometri kitaplığı dokümanlarına bakın.
  • journeySharing, Google Haritalar Platformu Ulaşım ve Lojistik çözümleri için destek sunar.
  • localContext, belirttiğiniz konuma yakın olan önemli önemli yerleri kullanıcılara gösterir. Daha fazla bilgi için Yerel Bağlam kitaplığı dokümanlarına bakın.
  • marker, haritalarınıza ileri düzeyde özelleştirilebilir, yüksek performanslı Gelişmiş İşaretçiler eklemenizi sağlar. Daha fazla bilgi için Gelişmiş İşaretçiler dokümanlarına bakın.
  • places, uygulamanızın belirli bir bölgedeki tesis, coğrafi konum veya önemli yer gibi yerleri aramasını sağlar. Daha fazla bilgi için Yerler kitaplığına göz atın.
  • visualization, verilerin görsel olarak temsil edilmesi için ısı haritaları sunar. Daha fazla bilgi için Görselleştirme kitaplığı dokümanlarına bakın.

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

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