Dynamic Library Import API

Dynamic Library Import API راه جدیدی برای بارگیری Maps JavaScript API و تمام کتابخانه‌های همراه با آن است. توانایی بارگذاری پویا کتابخانه ها در زمان اجرا شما را از نگرانی در مورد وابستگی های متقابل مؤلفه ها رها می کند و امکان بارگذاری مبتنی بر وعده کتابخانه ها را فراهم می کند. همچنین به شما امکان می دهد هنگام استفاده از Maps JavaScript API از استفاده از فضاهای نام طولانی خودداری کنید (فضاهای نام طولانی هنوز پر هستند و هنوز هم می توان از آنها استفاده کرد).

استفاده از Dynamic Library Import

برای استفاده از Dynamic Library Import API، یک تگ اسکریپت برای بارگذار بوت استرپ درون خطی به صفحه HTML خود اضافه کنید و کد زمان اجرا را برای فراخوانی importLibrary() اضافه کنید (شما همچنین می توانید از بارگذار اسکریپت ساده برای انجام این کار استفاده کنید؛ در این مورد کد برنامه شما باید قبل از استفاده از importLibrary منتظر تماس باشید. کد زیر را کپی کنید و کلید API خود و هر پارامتر بوت استرپ مورد نیاز برنامه خود را اضافه کنید:

<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_HERE",
  v: "beta",
  // Add other bootstrap parameters as needed, using camel case.
});
</script>

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

let map;

async function initMap() {
    // Create the map.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"),{
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: 'DEMO_MAP_ID',
    });

    // Add an info window.
    const infoWindow = new InfoWindow({
        ariaLabel: "Googleplex",
    });

    // Add a marker.
    const {AdvancedMarkerView} = await google.maps.importLibrary("marker");
    const markerView = new AdvancedMarkerView({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: 'Googleplex, Mountain View CA'
    });

    markerView.addListener('click', () => {
        infoWindow.close();
        infoWindow.setContent('<b>Googleplex</b>, Mountain View CA');
        infoWindow.open(markerView.map, markerView);
    });
}

initMap();

پارامترهای مورد نیاز

  • key : کلید API شما. Maps JavaScript API بارگیری نمی‌شود مگر اینکه یک کلید API معتبر مشخص شود.

  • v: "beta" برای پیش نمایش، باید کانال بتا را مشخص کنید.

پارامترهای اختیاری

  • libraries : فهرستی از کتابخانه‌های اضافی Maps JavaScript API جدا شده با کاما برای بارگیری. مشخص کردن مجموعه ای ثابت از کتابخانه ها به طور کلی توصیه نمی شود، اما برای توسعه دهندگانی که می خواهند رفتار حافظه پنهان را در وب سایت خود به خوبی تنظیم کنند، در دسترس است. البته لازم به ذکر است که در صورت نیاز به کتابخانه ای که مشخص نشده باشد، این امر می تواند باعث بارگیری کندتر شود.

  • language : زبان مورد استفاده. این روی نام کنترل‌ها، اعلامیه‌های حق نسخه‌برداری، مسیرهای رانندگی، و برچسب‌های کنترلی و پاسخ‌ها به درخواست‌های خدمات تأثیر می‌گذارد. لیست زبان های پشتیبانی شده را ببینید.

  • region : کد منطقه ای برای استفاده. این رفتار نقشه را بر اساس یک کشور یا قلمرو مشخص تغییر می دهد.

  • solutionChannel : پلتفرم نقشه های گوگل انواع مختلفی از کدهای نمونه را برای کمک به شما در راه اندازی و اجرای سریع ارائه می دهد. برای پیگیری پذیرش نمونه‌های کد پیچیده‌تر ما و بهبود کیفیت راه‌حل، Google پارامتر query solution_channel را در فراخوانی‌های API در کد نمونه ما قرار می‌دهد.

  • authReferrerPolicy : مشتریان Maps JS می توانند محدودیت های ارجاع دهنده HTTP را در کنسول Cloud پیکربندی کنند تا URL ها مجاز به استفاده از یک کلید API خاص را محدود کنند. به‌طور پیش‌فرض، این محدودیت‌ها را می‌توان به گونه‌ای پیکربندی کرد که فقط به مسیرهای خاصی اجازه استفاده از کلید API را بدهد. اگر هر URL در همان دامنه یا مبدأ ممکن است از کلید API استفاده کند، می‌توانید authReferrerPolicy: "origin" برای محدود کردن مقدار داده‌های ارسالی هنگام تأیید درخواست‌ها از Maps JavaScript API تنظیم کنید. وقتی این پارامتر مشخص شود و محدودیت‌های ارجاع‌دهنده HTTP در کنسول Cloud فعال باشد، Maps JavaScript API تنها در صورتی می‌تواند بارگیری شود که محدودیت ارجاع‌دهنده HTTP وجود داشته باشد که با دامنه وب‌سایت فعلی بدون مسیر مشخص مطابقت داشته باشد.