حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

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

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

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

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

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

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

تفعيل حزمة أدوات "خرائط Google" الجاهزة للأماكن

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

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

لتحميل المكتبات التي تتيح استخدام حزمة أدوات "خرائط Google" الجاهزة للأماكن، عليك أولاً تحميل Maps JavaScript API من خلال إضافة الـ أداة تحميل 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: "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');

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

بدء استخدام حِزم واجهة مستخدم "الأماكن" تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

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

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