با Places UI Kit شروع کنید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

این صفحه به شما نشان می‌دهد که چگونه یک کلید API دریافت کنید، Places UI Kit را فعال کنید و کتابخانه‌هایی را که از آن پشتیبانی می‌کنند بارگذاری کنید.

یک کلید API دریافت کنید و کیت رابط کاربری Places را فعال کنید

قبل از استفاده از Places UI Kit، باید:

  • یک پروژه ابری با یک حساب پرداخت ایجاد کنید.
  • کیت رابط کاربری Places را فعال کنید.
  • یک کلید API دریافت کنید.

برای کسب اطلاعات بیشتر، به «راه‌اندازی پروژه Google Cloud» مراجعه کنید.

فعال کردن کیت رابط کاربری Places

دریافت کلید API

بارگذاری کتابخانه‌های مورد نیاز

برای بارگذاری کتابخانه‌هایی که از 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 بیشتر بدانید .

مراحل بعدی