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ı eklemeniz gerekir:

<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 istemediğiniz sürece yüklenmeyen kitaplıklardan oluşur. Bileşenleri kitaplıklara ayırmak, API'nin hızlı bir şekilde yüklenmesine (ve ayrıştırılmasına) olanak tanır. Yalnızca ihtiyaç duyduğunuzda kitaplıkları yükleme ve ayrıştırma ile ilgili ek maliyete maruz kalırsınız.

Bir async işlevi içinden importLibrary() işlevini ç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

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 önyükleme isteğinde, Maps JavaScript API'nin google.maps.geometry kitaplığı için doğrudan komut dosyası yükleme etiketine nasıl istek ekleneceği gösterilmektedir:

<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 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&loading=async&libraries=geometry,places&callback=initMap"> </script>