الحصول على مفتاح Maps Demo Key: يمكنك تجربة ميزات محدّدة من Maps JavaScript API و"حزمة أدوات خرائط Google الجاهزة للأماكن" بدون أي تكلفة باستخدام مفتاح Maps Demo Key، وبدون الحاجة إلى إدخال معلومات الفوترة.

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

نوع العرض (نقطية ومتجهة)

توفّر Maps JavaScript API طريقتَين مختلفتَين لتنفيذ الخريطة: التنقيط والمتّجه. تحمّل الخريطة النقطية الخريطة كشبكة من مربّعات الصور النقطية المستندة إلى وحدات البكسل، والتي يتم إنشاؤها من جهة خادم "منصة خرائط Google"، ثم يتم عرضها على تطبيق الويب الخاص بك. تتكوّن الخريطة الاتجاهية من مربّعات مستندة إلى المتّجهات، والتي يتم رسمها في وقت التحميل من جهة العميل باستخدام WebGL، وهي تقنية ويب تتيح للمتصفّح الوصول إلى وحدة معالجة الرسومات على جهاز المستخدم لعرض الرسومات الثنائية الأبعاد والثلاثية الأبعاد.

ننصح باستخدام نوع الخريطة الاتجاهية للحصول على أفضل تجربة للمستخدم، لأنّه يوفّر دقة مرئية محسّنة وتخزينًا مؤقتًا أفضل على مستوى الخرائط، بالإضافة إلى إمكانية التحكّم في الإمالة والاتجاه على الخريطة. مزيد من المعلومات حول ميزات الخريطة الاتجاهية

نوع العرض التلقائي

يختلف نوع العرض التلقائي للخريطة حسب طريقة التنفيذ.

تستخدم الخرائط التي تستخدم العنصر <gmp-map> نوع العرض المتجه تلقائيًا.
تستخدم "خرائط Google" عنصر <div> مع google.maps.Map تلقائيًا لنوع العرض النقطي.

يمكنك ضبط نوع العرض لخريطة معيّنة إما من خلال تحديد خيار الخريطة renderingType أو من خلال ضبط الخيار على معرّف خريطة مرتبط. يتجاوز الخيار renderingType أي إعدادات لنوع العرض تم ضبطها من خلال ضبط معرّف خريطة.

تحديد خيار `renderingType`

استخدِم الخيار renderingType لتحديد نوع العرض النقطي أو المتجهي لخريطتك (لا يلزم توفّر معرّف خريطة). بالنسبة إلى الخرائط التي يتم تحميلها باستخدام عنصر div وJavaScript، يكون نوع العرض التلقائي هو google.maps.RenderingType.RASTER. اتّبِع الخطوات التالية لضبط الخيار renderingType:

حمِّل مكتبة RenderingType، ويمكن إجراء ذلك عند تحميل مكتبة "خرائط Google":
```
const { Map, RenderingType } = await google.maps.importLibrary("maps");
```

عند إعداد الخريطة، استخدِم الخيار renderingType لتحديد RenderingType.VECTOR أو RenderingType.RASTER:

map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

عند ضبط نوع عرض الخريطة الاتجاهية، يجب ضبط خيارات الميزات المطلوبة.

لتفعيل الإمالة، اضبط خيار الخريطة tiltInteractionEnabled على true أو استدعِ map.setTiltInteractionEnabled(true).
لتفعيل العرض الشامل، اضبط خيار الخريطة headingInteractionEnabled على true أو استخدِم map.setHeadingInteractionEnabled(true).

بالنسبة إلى الخرائط التي يتم تحميلها باستخدام العنصر <gmp-map>، يكون نوع العرض التلقائي هو google.maps.RenderingType.VECTOR، مع تفعيل التحكّم في الإمالة والاتجاه. لضبط نوع العرض باستخدام العنصر <gmp-map>، استخدِم السمة rendering-type.

استخدام معرّف خريطة لضبط نوع العرض

يمكنك أيضًا تحديد نوع العرض باستخدام معرّف خريطة. أنشئ معرّف خريطة باتّباع الخطوات الواردة في مقالة استخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية" - الحصول على معرّف خريطة. احرص على ضبط نوع الخريطة على JavaScript، وحدِّد خيارًا (متّجه أو تنقيط). ضَع علامة في المربّعَين إمالة وتدوير لتفعيل الإمالة والتدوير على الخريطة. سيسمح لك ذلك بضبط هذه القيم آليًا، كما يتيح للمستخدمين ضبط الإمالة والاتجاه مباشرةً على الخريطة. إذا كان استخدام الإمالة أو الاتجاه سيؤثر سلبًا في تطبيقك، اترك الإمالة والتدوير بدون تحديد حتى لا يتمكّن المستخدمون من ضبط الإمالة والتدوير.

إنشاء معرّف خريطة اتجاهية

بعد ذلك، عدِّل رمز إعداد الخريطة باستخدام معرّف الخريطة الذي أنشأته. يمكنك العثور على معرّفات الخرائط في صفحة إدارة الخرائط. قدِّم معرّف خريطة عند إنشاء مثيل للخريطة باستخدام السمة mapId كما هو موضّح هنا:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

رصد نوع العرض المستخدَم

لمعرفة نوع العرض المستخدَم، يمكنك استدعاء getRenderingType() في عنصر الخريطة، كما هو موضّح في المثال التالي:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```