এই পৃষ্ঠায় দেখানো হয়েছে কীভাবে একটি এপিআই কী (API key) পেতে হয়, প্লেসেস ইউআই কিট (Places UI Kit) সক্রিয় করতে হয় এবং এটিকে সমর্থনকারী লাইব্রেরিগুলো লোড করতে হয়।
একটি API কী নিন এবং Places UI Kit সক্রিয় করুন।
Places UI Kit ব্যবহার করার আগে, আপনাকে যা করতে হবে:
- একটি বিলিং অ্যাকাউন্টসহ একটি ক্লাউড প্রজেক্ট তৈরি করুন।
- Places UI Kit সক্রিয় করুন।
- একটি এপিআই কী সংগ্রহ করুন।
আরও জানতে, আপনার গুগল ক্লাউড প্রজেক্ট সেট আপ করুন দেখুন।
প্রয়োজনীয় লাইব্রেরিগুলো লোড করুন
Places UI Kit সমর্থনকারী লাইব্রেরিগুলো লোড করতে, প্রথমে আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে 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>
এরপরে, নিম্নলিখিতভাবে একটি async ফাংশনের ভেতর থেকে importLibrary() কল করতে await অপারেটরটি ব্যবহার করুন:
// Import the Places Library for PlaceDetailsElement and PlaceSearchElement const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');
Maps JavaScript API লোড করার বিষয়ে আরও জানুন ।
পরবর্তী পদক্ষেপ
,এই পৃষ্ঠায় দেখানো হয়েছে কীভাবে একটি এপিআই কী (API key) পেতে হয়, প্লেসেস ইউআই কিট (Places UI Kit) সক্রিয় করতে হয় এবং এটিকে সমর্থনকারী লাইব্রেরিগুলো লোড করতে হয়।
একটি API কী নিন এবং Places UI Kit সক্রিয় করুন।
Places UI Kit ব্যবহার করার আগে, আপনাকে যা করতে হবে:
- একটি বিলিং অ্যাকাউন্টসহ একটি ক্লাউড প্রজেক্ট তৈরি করুন।
- Places UI Kit সক্রিয় করুন।
- একটি এপিআই কী সংগ্রহ করুন।
আরও জানতে, আপনার গুগল ক্লাউড প্রজেক্ট সেট আপ করুন দেখুন।
প্রয়োজনীয় লাইব্রেরিগুলো লোড করুন
Places UI Kit সমর্থনকারী লাইব্রেরিগুলো লোড করতে, প্রথমে আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে 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>
এরপরে, নিম্নলিখিতভাবে একটি async ফাংশনের ভেতর থেকে importLibrary() কল করতে await অপারেটরটি ব্যবহার করুন:
// Import the Places Library for PlaceDetailsElement and PlaceSearchElement const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');
Maps JavaScript API লোড করার বিষয়ে আরও জানুন ।