تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
توفّر واجهة برمجة تطبيقات JavaScript لخرائط Google طريقتَين مختلفتَين لتنفيذ الخريطة: نقطية ومتجهة. يتم تحميل خريطة النقاط النقطية تلقائيًا، ويتم تحميل الخريطة على شكل شبكة من مربّعات صور نقطية مستندة إلى وحدات البكسل، ويتم إنشاء هذه المربّعات من جهة الخادم في "منصة خرائط Google"، ثم يتم عرضها على تطبيق الويب. تتألف خريطة المتجهات من مربّعات مستندة إلى المتجهات، ويتم رسمها في وقت التحميل من جهة العميل باستخدام WebGL، وهي تكنولوجيا ويب تتيح للمتصفّح الوصول إلى وحدة معالجة الرسومات (GPU) على جهاز المستخدم لعرض الرسومات الثنائية والثلاثية الأبعاد. يُنصح باستخدام نوع الخريطة المتجهة للحصول على أفضل تجربة للمستخدم، لأنّها توفّر دقة بصرية محسّنة بالإضافة إلى إمكانية التحكّم في الميل والاتجاه على الخريطة.
مزيد من المعلومات حول ميزات الخرائط المتجهة
اضبط نوع العرض لخريطة معيّنة إما عن طريق تحديد الخيار renderingType map
أو عن طريق ضبط الخيار على رقم تعريف خريطة مرتبط. يتجاوز الخيار renderingType
أي إعدادات لنوع العرض تم إجراؤها من خلال ضبط رقم تعريف خريطة.
تحديد الخيار renderingType
استخدِم الخيار renderingType لتحديد نوع العرض النقطي أو المتّجه للخريطة (لا يلزم توفير معرّف خريطة). بالنسبة إلى الخرائط التي يتم تحميلها باستخدام عنصر div وJavaScript، يكون نوع العرض التلقائي هو google.maps.RenderingType.RASTER. اتّبِع الخطوات التالية لضبط الخيار renderingType:
حمِّل مكتبة RenderingType، ويمكن إجراء ذلك عند تحميل مكتبة Maps:
عند ضبط نوع عرض الخريطة المتجهة، يجب ضبط خيارات الميزات المطلوبة.
لتفعيل الميل، اضبط خيار الخريطة tiltInteractionEnabled على true أو اتّصِل بالرقم map.setTiltInteractionEnabled(true).
لتفعيل التحريك، اضبط خيار الخريطة headingInteractionEnabled على true
أو اتّصِل بـ map.setHeadingInteractionEnabled(true).
بالنسبة إلى الخرائط التي يتم تحميلها باستخدام العنصر <gmp-map>، يكون نوع العرض التلقائي هو google.maps.RenderingType.VECTOR، مع تفعيل عناصر التحكّم في الميل والاتجاه. لضبط نوع العرض باستخدام عنصر <gmp-map>، استخدِم السمة rendering-type.
استخدام معرّف خريطة لضبط نوع العرض
يمكنك أيضًا تحديد نوع العرض باستخدام معرّف خريطة. لإنشاء معرّف خريطة جديد، اتّبِع الخطوات الواردة في استخدام ميزة "تنسيق الخرائط المستند إلى السحابة الإلكترونية" - الحصول على معرّف خريطة.
احرص على ضبط نوع الخريطة على JavaScript، واختَر خيارًا (متجه أو نقطي). ضَع علامة في المربّعَين الإمالة والتدوير لتفعيل الإمالة والتدوير على الخريطة. سيسمح لك ذلك بتعديل هذه القيم آليًا، كما سيتيح للمستخدمين تعديل الميل والاتجاه مباشرةً على الخريطة. إذا كان استخدام الميل أو الاتجاه سيؤثر سلبًا في تطبيقك، عليك ترك المربّعين الميل والدوران بدون وضع علامة فيهما حتى لا يتمكّن المستخدمون من ضبط الميل والدوران.
بعد ذلك، عدِّل رمز تهيئة الخريطة باستخدام رقم تعريف الخريطة الذي أنشأته. يمكنك العثور على معرّفات الخرائط في صفحة إدارة
خرائط Google. قدِّم معرّف خريطة عند إنشاء مثيل للخريطة باستخدام السمة mapId كما هو موضّح هنا:
تاريخ التعديل الأخير: 2025-08-27 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-08-27 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eThe Maps JavaScript API offers two map types: raster (default) and vector (recommended for enhanced user experience with tilt and heading control).\u003c/p\u003e\n"],["\u003cp\u003eYou can set the rendering type using the \u003ccode\u003erenderingType\u003c/code\u003e map option or by associating a map ID with specific rendering settings.\u003c/p\u003e\n"],["\u003cp\u003eVector maps provide better visual quality and allow for tilt and heading manipulation, requiring enabling specific interactions for these features.\u003c/p\u003e\n"],["\u003cp\u003eMap IDs offer pre-configured rendering types and can be created and managed through the Cloud console, enabling customization without code changes.\u003c/p\u003e\n"],["\u003cp\u003eUsing a map ID and API key from the same Google Cloud project is recommended for optimal integration and management.\u003c/p\u003e\n"]]],[],null,["# Rendering type (raster and vector)\n\nThe Maps JavaScript API offers two different implementations of the map: raster\nand vector. The raster map is loaded by default, and loads the map as a grid of\npixel-based raster image tiles, which are generated by Google Maps Platform\nserver-side, then served to your web app. The vector map is a composed of\nvector-based tiles, which are drawn at load time on the client-side using\nWebGL, a web technology that allows the browser to access the GPU on the user's\ndevice to render 2D and 3D graphics. The vector map type is recommended for the\nbest user experience, as it provides improved visual fidelity as well as the\nability to control tilt and heading on the map.\n[Learn more about vector map features.](/maps/documentation/javascript/vector-map)\n\nSet the rendering type for a map either by specifying the `renderingType` map\noption, or by setting the option on an associated map ID. The `renderingType`\noption overrides any rendering type settings made by configuring a map ID.\n\nSpecify the `renderingType` option\n----------------------------------\n\nUse the `renderingType` option to specify either the raster or vector\nrendering type for your map (no map ID required). For maps loaded using a `div`\nelement and JavaScript, the default rendering type is\n`google.maps.RenderingType.RASTER`. Take these steps to set the `renderingType`\noption:\n\n1. Load the `RenderingType` library; this can be done when loading the Maps\n library:\n\n const { Map, RenderingType } = await google.maps.importLibrary(\"maps\");\n\n2. When initializing the map, use the `renderingType` option to specify either\n `RenderingType.VECTOR` or `RenderingType.RASTER`:\n\n map = new Map(\n document.getElementById('map'),\n {\n zoom: 4,\n center: position,\n renderingType: RenderingType.VECTOR,\n }\n );\n\nWhen the vector map rendering type is set, you must set the options for the\nneeded features.\n\n- To enable tilt, set the `tiltInteractionEnabled` map option to `true` or call `map.setTiltInteractionEnabled(true)`.\n- To enable panning, set the `headingInteractionEnabled` map option to `true` or call `map.setHeadingInteractionEnabled(true)`.\n\nFor maps loaded using the `\u003cgmp-map\u003e` element, the default rendering type is\n`google.maps.RenderingType.VECTOR`, with tilt and heading control enabled. To\nset the rendering type by using the `\u003cgmp-map\u003e` element, use the\n`rendering-type` attribute.\n\nUse a map ID to set rendering type\n----------------------------------\n\nYou can also specify the rendering type by using a map ID. To create a new map\nID, follow the steps in [Using Cloud-based Map Styling - Get a map ID](/maps/documentation/javascript/styling#creating-map-ids).\nBe sure to set the Map type to **JavaScript** , and select an option (**Vector**\nor **Raster** ). Check **Tilt** and **Rotation** to enable tilt and rotation\non the map. Doing so will allow you to programmatically adjust these values, and\nalso lets users adjust tilt and heading directly on the map. If the use of tilt\nor heading will adversely affect your app, leave **Tilt** and **Rotation** un-\nchecked so users will not be able to adjust tilt and rotation.\n\nNext, update your map initialization code with the map ID you created. You can\nfind your map IDs on the\n[Maps\nManagement](https://console.cloud.google.com/google/maps-apis/studio/maps) page. Provide a map ID when you instantiate the map using the\n`mapId` property as shown here: \n\n```javascript\nmap = new google.maps.Map(document.getElementById('map'), {\n center: {lat: -34.397, lng: 150.644},\n zoom: 8,\n mapId: '\u003cvar translate=\"no\"\u003eMAP_ID\u003c/var\u003e'\n});\n```\n| **Important:** It is recommended to associate your map ID and API key with the same Google Cloud console project."]]
