এই পৃষ্ঠাটি আপনাকে দেখায় কিভাবে একটি API কী পেতে হয়, প্লেসেস UI কিট সক্ষম করতে হয় এবং এটি সমর্থন করে এমন লাইব্রেরিগুলি লোড করতে হয়।
একটি API কী পান এবং Places UI কিট সক্ষম করুন৷
Places UI কিট ব্যবহার করার আগে, আপনাকে করতে হবে:
- একটি বিলিং অ্যাকাউন্ট দিয়ে একটি ক্লাউড প্রকল্প তৈরি করুন।
- Places UI কিট সক্ষম করুন।
- একটি API কী পান।
আরও জানতে, আপনার Google ক্লাউড প্রকল্প সেট আপ দেখুন।
প্রয়োজনীয় লাইব্রেরি লোড করুন
প্লেস UI কিট সমর্থন করে এমন লাইব্রেরিগুলি লোড করতে, প্রথমে আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে মানচিত্র জাভাস্ক্রিপ্ট 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: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
এর পরে, একটি async ফাংশনের মধ্যে থেকে importLibrary() কল করতে await অপারেটর ব্যবহার করুন, নিম্নরূপ:
// Import the Places Library for PlaceDetailsElement and PlaceListElement
const {PlaceDetailsElement, PlaceListElement} = await google.maps.importLibrary('places');
// Import the Elevation Library for ElevationElement
const {ElevationElement} = await google.maps.importLibrary('elevation');
Maps JavaScript API লোড করার বিষয়ে আরও জানুন ।