بدء استخدام حِزم واجهة مستخدم "الأماكن"

اختيار النظام الأساسي: Android iOS JavaScript

توضّح لك هذه الصفحة كيفية الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل Places UI Kit وتحميل المكتبات المتوافقة معه.

الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل Places UI Kit

قبل استخدام Places UI Kit، عليك إجراء ما يلي:

  • أنشئ مشروعًا على السحابة الإلكترونية باستخدام حساب فوترة.
  • فعِّل Places UI Kit.
  • الحصول على مفتاح واجهة برمجة التطبيقات

لمزيد من المعلومات، يُرجى الاطّلاع على إعداد مشروعك على Google Cloud.

تفعيل حزمة أدوات Places UI Kit

الحصول على مفتاح واجهة برمجة التطبيقات

تحميل المكتبات المطلوبة

لتحميل المكتبات التي تتوافق مع 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');

  // Import the Elevation Library for ElevationElement
  const {ElevationElement} = await google.maps.importLibrary('elevation');

مزيد من المعلومات حول تحميل Maps JavaScript API

الخطوات التالية