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

توضّح لك هذه الصفحة كيفية الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل حِزمة أدوات واجهة مستخدم "الأماكن" وتحميل المكتبات المتوافقة معها.

الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل مجموعة أدوات واجهة مستخدم "الأماكن"

قبل استخدام حِزمة واجهة مستخدم "الأماكن"، عليك إجراء ما يلي:

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

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

تفعيل مجموعة أدوات واجهة المستخدم في "الأماكن"

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

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

لتحميل المكتبات المتوافقة مع حزمة أدوات واجهة المستخدم في "الأماكن"، حمِّل أولاً واجهة برمجة التطبيقات JavaScript للخرائط من خلال إضافة مُحمِّل bootstrap مضمّن إلى رمز تطبيقك، كما هو موضّح في المقتطف التالي: 

  <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

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