Kütüphaneler

Maps JavaScript API'nin JavaScript kodunu yüklemek için sayfanıza aşağıdaki biçimde bir önyü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, siz özellikle talep edene kadar yüklenmeyen kitaplıklardan oluşur. Bileşenleri kitaplıklara ayırmak, API'nin hızlı bir şekilde yüklenip ayrıştırılmasını sağlar. Böylece, kitaplıkları yalnızca ihtiyaç duyduğunuzda yükleyip ayrıştırarak ek yükten kurtulursunuz. Dinamik kitaplık içe aktarma kullanılırken satır içi önyükleyici, varsayılan olarak hiçbir kitaplığı (core veya maps bile) yüklemez. google.maps.importLibrary() çağrılmadan önce Maps JavaScript API'nin hiçbir bölümü yüklenmez.

Çalışma zamanında bir kitaplık yüklemek için await operatörünü kullanarak bir async işlevinden google.maps.importLibrary() işlevini çağırın. Yalnızca istenen kitaplığın yüklendiğini varsayın ve kodunuzun kullandığı her kitaplık için google.maps.importLibrary() yöntemini çağırın. Örneğin:

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

Aşağıdaki kod örneğinde, Map ve AdvancedMarkerElement sınıflarına erişmek için hem maps hem de marker kitaplıklarının yüklenmesi gösterilmektedir:

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

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