লাইব্রেরি

Maps JavaScript 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",
    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-তে লাইব্রেরি থাকে যা আপনি নির্দিষ্টভাবে অনুরোধ না করা পর্যন্ত লোড হয় না। কম্পোনেন্টগুলিকে লাইব্রেরিতে ভাগ করে দিলে API দ্রুত লোড ও পার্স করতে পারে, ফলে আপনি শুধুমাত্র প্রয়োজন অনুযায়ী লাইব্রেরি লোড ও পার্স করার অতিরিক্ত ওভারহেড বহন করেন। ডায়নামিক লাইব্রেরি ইমপোর্ট ব্যবহার করার সময়, ইনলাইন বুটস্ট্র্যাপ লোডার ডিফল্ট হিসেবে কোনও লাইব্রেরি লোড করে না (এমনকি core বা maps-ও নয়); google.maps.importLibrary() কল করার আগে, Maps JavaScript API-এর কোনও অংশই লোড করা হয় না।

রানটাইমে লাইব্রেরি লোড করতে, await অপারেটর ব্যবহার করে google.maps.importLibrary() কল করুন, এটি async ফাংশনের মধ্যে থেকে করতে হবে। ধরে নিন যে শুধুমাত্র অনুরোধ করা লাইব্রেরি লোড করা হয়েছে এবং আপনার কোড ব্যবহার করে এমন প্রতিটি লাইব্রেরির জন্য google.maps.importLibrary() কল করুন। যেমন:

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

নিচে দেওয়া কোডের উদাহরণে Map ও AdvancedMarkerElement ক্লাস অ্যাক্সেস করতে maps এবং marker লাইব্রেরি লোড করা দেখানো হয়েছে:

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

জাভাস্ক্রিপ্ট

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

উপলভ্য লাইব্রেরি

নিম্নলিখিত লাইব্রেরিগুলি ডাইনামিক লাইব্রেরি ইমপোর্ট এবং ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ-এর সাথে ব্যবহারের জন্য উপলভ্য:

নিম্নলিখিত বুটস্ট্র্যাপ অনুরোধে দেখানো হয়েছে যে কীভাবে Maps JavaScript API-এর google.maps.geometry লাইব্রেরির জন্য অনুরোধ, সরাসরি স্ক্রিপ্ট লোডিং ট্যাগে যোগ করতে হয়:

<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>