Places UI কিট দিয়ে শুরু করুন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

এই পৃষ্ঠাটি আপনাকে দেখায় কিভাবে একটি API কী পেতে হয়, Places UI Kit সক্ষম করতে হয় এবং এটি সমর্থন করে এমন লাইব্রেরিগুলি লোড করতে হয়।

একটি API কী পান এবং Places UI Kit সক্ষম করুন

প্লেসেস UI কিট ব্যবহার করার আগে, আপনার যা করতে হবে:

  • একটি বিলিং অ্যাকাউন্ট দিয়ে একটি ক্লাউড প্রকল্প তৈরি করুন।
  • Places UI কিট সক্রিয় করুন।
  • একটি API কী পান।

আরও জানতে, আপনার গুগল ক্লাউড প্রকল্প সেট আপ করুন দেখুন।

স্থান UI কিট সক্ষম করুন

একটি API কী পান

প্রয়োজনীয় লাইব্রেরিগুলি লোড করুন

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>
    

এরপর, await অপারেটর ব্যবহার করে একটি async ফাংশনের মধ্যে থেকে importLibrary() কল করুন, নিম্নরূপ:

  // Import the Places Library for PlaceDetailsElement and PlaceSearchElement
  const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');
  

Maps JavaScript API লোড করা সম্পর্কে আরও জানুন

পরবর্তী পদক্ষেপ