Places UI Kit का इस्तेमाल शुरू करना (प्रयोग के तौर पर उपलब्ध)

इस पेज पर, एपीआई पासकोड पाने, Places यूज़र इंटरफ़ेस (यूआई) किट को चालू करने, और इससे काम करने वाली लाइब्रेरी लोड करने का तरीका बताया गया है.

एपीआई पासकोड पाना और Places का यूज़र इंटरफ़ेस (यूआई) किट चालू करना

Places UI Kit का इस्तेमाल करने से पहले, आपको ये काम करने होंगे:

  • बिलिंग खाते के साथ Cloud प्रोजेक्ट बनाएं.
  • Places UI Kit चालू करें.
  • एपीआई पासकोड पाएं.

ज़्यादा जानने के लिए, Google Cloud प्रोजेक्ट सेट अप करना लेख पढ़ें.

Places की यूज़र इंटरफ़ेस (यूआई) किट चालू करना

एपीआई पासकोड पाना

ज़रूरी लाइब्रेरी लोड करना

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: "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 को लोड करने के बारे में ज़्यादा जानें.

अगले कदम