بدء استخدام حِزم واجهة مستخدم "الأماكن"
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
توضّح لك هذه الصفحة كيفية الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل حِزمة أدوات واجهة مستخدم "الأماكن" وتحميل المكتبات المتوافقة معها.
الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل مجموعة أدوات واجهة مستخدم "الأماكن"
قبل استخدام حِزمة واجهة مستخدم "الأماكن"، عليك إجراء ما يلي:
- أنشئ مشروعًا على 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: "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
الخطوات التالية
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-07-09 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-09 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eTo use the Places UI Kit, you must create a Cloud project, enable the Places UI Kit, and obtain an API key.\u003c/p\u003e\n"],["\u003cp\u003eThe Maps JavaScript API needs to be loaded using the inline bootstrap loader, including your API key and desired version.\u003c/p\u003e\n"],["\u003cp\u003eUtilize the \u003ccode\u003eimportLibrary()\u003c/code\u003e function to load specific libraries like \u003ccode\u003eplaces\u003c/code\u003e and \u003ccode\u003eelevation\u003c/code\u003e for using elements like \u003ccode\u003ePlaceDetailsElement\u003c/code\u003e, \u003ccode\u003ePlaceListElement\u003c/code\u003e, and \u003ccode\u003eElevationElement\u003c/code\u003e.\u003c/p\u003e\n"]]],["To use the Places UI Kit, first create a Cloud project with billing and enable the Places UI Kit. Obtain an API key for access. Load supporting libraries by adding the Maps JavaScript API's inline bootstrap loader to your code. Utilize the `importLibrary()` function within an `async` function to import libraries like 'places' and 'elevation', then you can use the `PlaceDetailsElement`, `PlaceListElement`, and `ElevationElement`.\n"],null,["Select platform: [Android](/maps/documentation/places/android-sdk/basic-place-autocomplete-ui-kit \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/basic-place-autocomplete-ui-kit \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/places-ui-kit/basic-autocomplete \"View this page for the JavaScript platform docs.\")\n\nThis page shows you how to get an API key, enable the Places UI Kit, and load the libraries that support it.\n\nGet an API key and enable the Places UI Kit\n\nBefore using the Places UI Kit, you need to:\n\n- Create a Cloud project with a billing account.\n- Enable the Places UI Kit.\n- Get an API key.\n\nTo learn more, see [Set up your Google Cloud project](/maps/documentation/javascript/cloud-setup).\n\n\n[Enable Places UI Kit](https://console.cloud.google.com/apis/library/placewidgets.googleapis.com?utm_source=Docs_EnableAPIs&utm_content=Docs_placewidgets&ref=https://developers.google.com/maps/documentation/javascript/places-ui-kit/get-started)\n\n[Get an API key](https://console.cloud.google.com/project/_/google/maps-apis/credentials?utm_source=Docs_CreateAPIKey&utm_content=Docs_placewidgets&ref=https://developers.google.com/maps/documentation/javascript/places-ui-kit/get-started)\n\nLoad the required libraries\n\nTo load the libraries that support the Places UI Kit, first load the Maps JavaScript API by adding the\ninline bootstrap loader to your application code, as shown in the following snippet: \n\n```javascript\n \u003cscript\u003e\n (g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})({\n key: \"YOUR_API_KEY\",\n v: \"weekly\",\n // Use the 'v' parameter to indicate the /maps/documentation/javascript/versions to use (weekly, beta, alpha, etc.).\n // Add other /maps/documentation/javascript/load-maps-js-api#required_parameters as needed, using camel case.\n });\n \u003c/script\u003e\n \n```\n\nNext, use the `await` operator to call `importLibrary()`\nfrom within an `async` function, as follows: \n\n```javascript\n // Import the Places Library for PlaceDetailsElement and PlaceSearchElement\n const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');\n\n // Import the Elevation Library for ElevationElement\n const {ElevationElement} = await google.maps.importLibrary('elevation');\n \n```\n\n[Learn more about loading the Maps JavaScript API](/maps/documentation/javascript/load-maps-js-api).\n\nNext steps\n\n- [Display place details](/maps/documentation/javascript/places-ui-kit/place-details)\n- [Display search results](/maps/documentation/javascript/places-ui-kit/place-list)\n- [Display elevation data](/maps/documentation/javascript/places-ui-kit/elevation)"]]