توضّح لك هذه الصفحة كيفية الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل حِزمة أدوات واجهة مستخدم "الأماكن" وتحميل المكتبات المتوافقة معها.
الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل مجموعة أدوات واجهة مستخدم "الأماكن"
قبل استخدام حِزمة واجهة مستخدم "الأماكن"، عليك إجراء ما يلي:
- أنشئ مشروعًا على 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