این صفحه به شما نشان می دهد که چگونه یک کلید API را دریافت کنید، کیت UI Places را فعال کنید و کتابخانه هایی را که از آن پشتیبانی می کنند بارگیری کنید.
یک کلید API دریافت کنید و Places UI Kit را فعال کنید
قبل از استفاده از Places UI Kit، باید:
- یک پروژه Cloud با یک حساب صورتحساب ایجاد کنید.
- Places UI Kit را فعال کنید.
- یک کلید API دریافت کنید.
برای کسب اطلاعات بیشتر، به تنظیم پروژه 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: "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>
در مرحله بعد، از عملگر await برای فراخوانی importLibrary() از داخل یک تابع async ، به صورت زیر استفاده کنید:
// 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 بیشتر بیاموزید .