इस पेज पर, एपीआई पासकोड पाने, जगहों की जानकारी देने वाली यूआई किट को चालू करने, और उसे सपोर्ट करने वाली लाइब्रेरी लोड करने का तरीका बताया गया है.
एपीआई पासकोड पाना और जगहों की जानकारी देने वाली यूआई किट को चालू करना
जगहों की जानकारी देने वाली यूआई किट का इस्तेमाल करने से पहले, आपको ये काम करने होंगे:
- बिलिंग खाते के साथ Cloud प्रोजेक्ट बनाना.
- जगहों की जानकारी देने वाली यूआई किट को चालू करना.
- एपीआई पासकोड पाना.
ज़्यादा जानने के लिए, Google Cloud प्रोजेक्ट सेट अप करना लेख पढ़ें.
जगहों की जानकारी देने वाली यूआई किट की सुविधा चालू करें
ज़रूरी लाइब्रेरी लोड करना
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 ऑपरेटर का इस्तेमाल करके importLibrary()
को async फ़ंक्शन में कॉल करें. इसका तरीका यहां दिया गया है:
// Import the Places Library for PlaceDetailsElement and PlaceSearchElement const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');
Maps JavaScript API लोड करने के बारे में ज़्यादा जानें.