Kitaplıklar

Maps JavaScript API için JavaScript kodunu yüklemek üzere 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>

İlgili içeriği oluşturmak için kullanılan Maps JavaScript API, siz yükleyene kadar yüklenmeyecek kitaplıklardan oluşur. özellikle talep ediyorum. Bileşenleri kitaplıklara ayırmak, API'nin hızlı yüklenmesi (ve ayrıştırılması). Yalnızca yükleme ve ayrıştırma için ek ücret ödersiniz ihtiyaç duyduğunuza göre uyarlayabilirsiniz.

Çağrı yapmak için await operatörünü kullanarak çalışma zamanında ek kitaplıkları yükleyin async işlevi içinden importLibrary(). Ö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 şununla kullanılabilir: Dinamik Kitaplığı İçe Aktarma:

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

Aşağıdaki kitaplıkların eski önyükleme komut dosyası etiketi:

Aşağıdaki önyükleme isteğinde, Maps JavaScript API'nin google.maps.geometry kitaplığından eski sürüme önyükleme yükleyici komut dosyası:

<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 kitaplıkları 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>