الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل Maps JavaScript API
قبل استخدام العلامات المتقدّمة، يجب أن يكون لديك مشروع على Cloud يتضمّن حسابًا للفوترة، ويجب تفعيل Maps JavaScript API. لمزيد من المعلومات، يُرجى الاطّلاع على إعداد مشروعك على Google Cloud.
تتطلّب "محدّدات المواقع المتقدّمة" توفير رقم تعريف خريطة. في حال عدم توفّر رقم تعريف الخريطة، لا يمكن تحميل محدّدات المواقع المتقدّمة. كخطوة لتحديد المشاكل وحلّها، يمكنك إضافة أداة معالجة mapcapabilities_changed للاشتراك في التغييرات التي تطرأ على إمكانات الخريطة. استخدام "إمكانات الخريطة" اختياري، ولا يُنصح به إلا لأغراض الاختبار وتحديد المشاكل وحلّها، أو لأغراض التراجع عن وقت التشغيل.
// Optional: subscribe to map capability changes.map.addListener('mapcapabilities_changed',()=>{constmapCapabilities=map.getMapCapabilities();if(!mapCapabilities.isAdvancedMarkersAvailable){// Advanced markers are *not* available, add a fallback.}});
تاريخ التعديل الأخير: 2025-08-17 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-17 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eGet started with advanced markers by obtaining an API key, enabling the Maps JavaScript API, and creating a map ID.\u003c/p\u003e\n"],["\u003cp\u003eUpdate your map initialization code to include loading the advanced markers library and providing a map ID when instantiating the map.\u003c/p\u003e\n"],["\u003cp\u003eFor testing purposes, use \u003ccode\u003eDEMO_MAP_ID\u003c/code\u003e as the map ID or utilize the provided example code, but replace the example map IDs for production.\u003c/p\u003e\n"],["\u003cp\u003eOptionally, check map capabilities to ensure advanced markers are available or to implement a fallback if they are not supported.\u003c/p\u003e\n"]]],["To use advanced markers, you need a Cloud project with a billing account and the Maps JavaScript API enabled. First, obtain an API key and create a map ID, selecting JavaScript as the map type with either Vector or Raster options, or using `DEMO_MAP_ID` for testing. Update your map initialization code by loading the Maps JavaScript API and the advanced markers library. Instantiate the map with the created or demo map ID. Optionally, use a listener to check map capabilities.\n"],null,["Select platform: [Android](/maps/documentation/android-sdk/advanced-markers/start \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/advanced-markers/overview \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/advanced-markers/start \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nFollow these steps to get set up with advanced markers.\n\nGet an API key and enable the Maps JavaScript API\n\nBefore using advanced markers, you need a Cloud\nproject with a billing account, and the Maps JavaScript API\nenabled. To learn more, see [Set up your Google Cloud project](/maps/documentation/javascript/cloud-setup).\n\n[Get an API key](/maps/documentation/javascript/get-api-key)\n\nCreate a map ID\n\nTo create a new [map ID](/maps/documentation/get-map-id), follow the steps in\n[Cloud customization](/maps/documentation/javascript/maps-customization-overview).\nSet the Map type to **JavaScript** , and select either the **Vector** or\n**Raster** option.\n| **Important:** For testing, you can skip the step of creating and configuring a map ID, by using `mapId: 'DEMO_MAP_ID'` in your app code.\n\nUpdate your map initialization code\n\nThis requires the map ID you just created. It can be found on your [Maps\nManagement](https://console.cloud.google.com/google/maps-apis/studio/maps) page.\n\n1. [Load the Maps JavaScript API](/maps/documentation/javascript/load-maps-js-api).\n\n2. Load the advanced markers library from within an `async`\n function when needed:\n\n ```javascript\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\") as google.maps.MarkerLibrary;\n ```\n3. Provide a map ID when you instantiate the map using the `mapId` property.\n This can be a map ID that you provide, or `DEMO_MAP_ID`.\n\n ```javascript\n const map = new\n google.maps.Map(document.getElementById('map'), {\n center: {lat: -34.397, lng: 150.644},\n zoom: 8,\n mapId: 'YOUR_MAP_ID'\n });\n ```\n\n| **Caution:** The example maps for advanced markers use map IDs that are linked to a reduced-POI map style. If you re-use example code, we recommend replacing these map IDs with `DEMO_MAP_ID`, or with your own map ID.\n\nCheck map capabilities (optional)\n\nAdvanced markers requires a map ID. If the map ID is missing,\nadvanced markers cannot load. As a troubleshooting step,\nyou can add a `mapcapabilities_changed` listener to subscribe to map capability\nchanges. Using Map Capabilities is optional, and recommended only for testing\nand troubleshooting purposes, or for runtime fallback purposes. \n\n```javascript\n// Optional: subscribe to map capability changes.\nmap.addListener('mapcapabilities_changed', () =\u003e {\n const mapCapabilities = map.getMapCapabilities();\n\n if (!mapCapabilities.isAdvancedMarkersAvailable) {\n // Advanced markers are *not* available, add a fallback.\n }\n});\n```\n\nNext steps\n\n[Create a default advanced marker](/maps/documentation/javascript/advanced-markers/add-marker)"]]
