ডায়নামিক লাইব্রেরি আমদানি API

ডাইনামিক লাইব্রেরি ইম্পোর্ট API হল মানচিত্র জাভাস্ক্রিপ্ট API লোড করার একটি নতুন উপায় এবং এটির সাথে থাকা সমস্ত লাইব্রেরি। রানটাইমে গতিশীলভাবে লাইব্রেরি লোড করার ক্ষমতা আপনাকে ক্রস-কম্পোনেন্ট নির্ভরতা সম্পর্কে উদ্বেগ থেকে মুক্তি দেয় এবং লাইব্রেরিগুলির প্রতিশ্রুতি-ভিত্তিক লোড করার অনুমতি দেয়। এটি আপনাকে মানচিত্র জাভাস্ক্রিপ্ট API ব্যবহার করার সময় দীর্ঘ নেমস্পেস ব্যবহার এড়াতে দেয় (দীর্ঘ নামস্থান এখনও জনবহুল এবং এখনও ব্যবহার করা যেতে পারে)।

ডায়নামিক লাইব্রেরি আমদানি ব্যবহার করুন

ডায়নামিক লাইব্রেরি আমদানি 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>

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

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 কী । মানচিত্র জাভাস্ক্রিপ্ট API লোড হবে না যদি না একটি বৈধ API কী নির্দিষ্ট করা হয়।

• v: "beta" পূর্বরূপের জন্য, আপনাকে অবশ্যই বিটা চ্যানেল নির্দিষ্ট করতে হবে।

ঐচ্ছিক পরামিতি

• libraries : লোড করার জন্য অতিরিক্ত মানচিত্র জাভাস্ক্রিপ্ট API লাইব্রেরিগুলির একটি কমা দ্বারা পৃথক করা তালিকা৷ লাইব্রেরিগুলির একটি নির্দিষ্ট সেট নির্দিষ্ট করা সাধারণত সুপারিশ করা হয় না, তবে বিকাশকারীদের জন্য উপলব্ধ যারা তাদের ওয়েবসাইটে ক্যাশিং আচরণকে সূক্ষ্মভাবে সুর করতে চান৷ যদিও এটি উল্লেখ করা উচিত যে যদি নির্দিষ্ট করা না থাকে এমন একটি লাইব্রেরির প্রয়োজন হয় তবে এটি ধীর লোডিং হতে পারে।

• language : ব্যবহার করার ভাষা । এটি নিয়ন্ত্রণের নাম, কপিরাইট বিজ্ঞপ্তি, ড্রাইভিং নির্দেশাবলী, এবং নিয়ন্ত্রণ লেবেল এবং পরিষেবার অনুরোধের প্রতিক্রিয়াগুলিকে প্রভাবিত করে৷ সমর্থিত ভাষার তালিকা দেখুন।

• region : ব্যবহার করার জন্য অঞ্চল কোড। এটি একটি প্রদত্ত দেশ বা অঞ্চলের উপর ভিত্তি করে মানচিত্রের আচরণকে পরিবর্তন করে৷

• solutionChannel : Google মানচিত্র প্ল্যাটফর্ম অনেক ধরনের নমুনা কোড প্রদান করে যাতে আপনি দ্রুত উঠতে এবং দৌড়াতে সাহায্য করেন। আমাদের আরও জটিল কোড নমুনা গ্রহণের ট্র্যাক করতে এবং সমাধানের গুণমান উন্নত করতে, Google আমাদের নমুনা কোডে API কলগুলিতে solution_channel ক্যোয়ারী প্যারামিটার অন্তর্ভুক্ত করে।

• authReferrerPolicy : মানচিত্র JS গ্রাহকরা ক্লাউড কনসোলে HTTP রেফারার বিধিনিষেধ কনফিগার করতে পারেন কোন URLগুলিকে একটি নির্দিষ্ট API কী ব্যবহার করার অনুমতি দেওয়া হয়েছে তা সীমাবদ্ধ করতে৷ ডিফল্টরূপে, এই বিধিনিষেধগুলি শুধুমাত্র নির্দিষ্ট পাথগুলিকে API কী ব্যবহার করার অনুমতি দেওয়ার জন্য কনফিগার করা যেতে পারে। যদি একই ডোমেন বা মূলের কোনো URL API কী ব্যবহার করতে পারে, আপনি মানচিত্র জাভাস্ক্রিপ্ট API থেকে অনুরোধ অনুমোদন করার সময় পাঠানো ডেটার পরিমাণ সীমিত করতে authReferrerPolicy: "origin" সেট করতে পারেন। যখন এই প্যারামিটারটি নির্দিষ্ট করা থাকে এবং ক্লাউড কনসোলে HTTP রেফারার বিধিনিষেধ সক্ষম করা থাকে, তখন Maps JavaScript API শুধুমাত্র তখনই লোড করতে সক্ষম হবে যদি একটি HTTP রেফারার সীমাবদ্ধতা থাকে যা নির্দিষ্ট কোনো পাথ ছাড়াই বর্তমান ওয়েবসাইটের ডোমেনের সাথে মেলে।