این صفحه به شما نشان میدهد که چگونه یک کلید API دریافت کنید، Places UI Kit را فعال کنید و کتابخانههایی را که از آن پشتیبانی میکنند بارگذاری کنید.
یک کلید API دریافت کنید و کیت رابط کاربری Places را فعال کنید
قبل از استفاده از Places UI Kit، باید:
- یک پروژه ابری با یک حساب پرداخت ایجاد کنید.
- کیت رابط کاربری Places را فعال کنید.
- یک کلید API دریافت کنید.
برای کسب اطلاعات بیشتر، به «راهاندازی پروژه Google Cloud» مراجعه کنید.
فعال کردن کیت رابط کاربری Places
بارگذاری کتابخانههای مورد نیاز
برای بارگذاری کتابخانههایی که از Places UI Kit پشتیبانی میکنند، ابتدا API جاوا اسکریپت Maps را با افزودن بوتاسترپ لودر درونخطی به کد برنامه خود، همانطور که در قطعه کد زیر نشان داده شده است، بارگذاری کنید:
<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');
درباره بارگیری API جاوا اسکریپت Maps بیشتر بدانید .