کتابخانه

برای بار کردن کد جاوا اسکریپت برای «میانای برنامه‌سازی کاربردی جاوا اسکریپت در Maps»، یک اسکریپت بارکننده راه‌اندازی در صفحه خود اضافه می‌کنید، به این شکل:

<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 از کتابخانه‌هایی تشکیل شده است که تا زمانی که به‌طور خاص آن‌ها را درخواست نکنید بار نمی‌شوند. تقسیم کردن مؤلفه‌ها به کتابخانه‌ها باعث می‌شود میانای برنامه‌سازی کاربردی سریع‌تر بار شود و تجزیه کند، بنابراین فقط زمانی که به کتابخانه‌ها نیاز دارید، سربار اضافی بار کردن و تجزیه کردن آن‌ها را متحمل می‌شوید. وقتی از وارد کردن کتابخانه پویا استفاده می‌کنید، بارکننده راه‌اندازی درخط به‌طور پیش‌فرض هیچ کتابخانه‌ای را بار نمی‌کند (حتی core یا maps را هم بار نمی‌کند)؛ پیش‌از فراخوانی google.maps.importLibrary()، هیچ بخشی از Maps JavaScript API بار نمی‌شود.

برای بار کردن کتابخانه در زمان اجرا، از عملگر await برای فراخوانی google.maps.importLibrary() در تابع async استفاده کنید. فرض کنید فقط کتابخانه درخواست‌شده بارگیری شده است و برای هر کتابخانه‌ای که کدتان استفاده می‌کند، google.maps.importLibrary() را فراخوانی کنید. برای مثال:

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

نمونه کد زیر بار کردن هر دو کتابخانه maps و marker را برای دسترسی به کلاس‌های Map و AdvancedMarkerElement نشان می‌دهد:

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();

کتابخانه‌های دردسترس

کتابخانه‌های زیر برای استفاده با وارد کردن کتابخانه پویا و برچسب بار کردن مستقیم نوشتار دردسترس است:

درخواست راه‌اندازی زیر نشان می‌دهد که چگونه می‌توان درخواستی برای کتابخانه google.maps.geometry از Maps JavaScript API به برچسب بارگیری مستقیم اسکریپت اضافه کرد:

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

برای درخواست چند کتابخانه، آن‌ها را با کاما از هم جدا کنید:

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