أفضل الممارسات

أفضل ممارسات JavaScript

تعمل واجهة برمجة تطبيقات JavaScript للخرائط مع بيئة ECMAScript وW3C DOM العادية. وهذا يعني أن تعديل أو إلغاء سلوك الفئات والكائنات المضمنة التي يوفرها المتصفح يمكن أن يجعل واجهة برمجة تطبيقات JavaScript للخرائط غير عاملة. في بعض الأحيان، قد تتعارض مكتبات أخرى مع واجهة برمجة تطبيقات JavaScript للخرائط من خلال تغيير سلوك المتصفح بحيث لا يكون بيئة ECMAScript عادية بعد ذلك. ولا تتوافق واجهة برمجة تطبيقات JavaScript للخرائط مع تلك المكتبات.

المكتبات التي يُعرف أنّها غير متوافقة مع Maps JavaScript API:

  • النموذج الأولي: يلغي Array.from() وElement.prototype.remove() بطرق غير عادية.
  • Mootools (الإصدارات القديمة): يتم تجاهل Array.from() بطريقة غير عادية.
  • DateJS (الإصدارات القديمة): يلغي Date.now() بطريقة غير عادية.

في بعض الأحيان، يمكن تعديل المكتبات غير المتوافقة لإزالة عمليات الإلغاء غير العادية.

أفضل الممارسات المتعلقة بخدمة مقارنة الأسعار (CSS)

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

غالبًا ما تستخدم إطارات عمل CSS ومكونات نمط JavaScript إعادة تعيين CSS أو أداة تسوية للتعامل مع الاختلافات في العرض بين المتصفحات. تستخدم الأطر غالبًا العنصر box-sizing لقياس هوامش وحدود عناصر صفحة الويب. ويشمل ذلك عادةً تغيير سلوك المتصفّح التلقائي من استخدام content-box إلى border-box.

يمكن أن يؤدي هذا النوع من إعادة ضبط CSS إلى حدوث تعارض بين CSS وواجهة برمجة تطبيقات JavaScript للخرائط لأن واجهة برمجة التطبيقات لا تتيح إجراء التغييرات على ورقة أنماط وكيل المستخدم. قد تحدث تعارضات إضافية في CSS إذا كان إطار العمل أو المكوِّن يشير إلى فئات CSS أو عناصر DOM في Maps JavaScript API.

لتجنّب هذه التعارضات، لدينا العديد من الاقتراحات التي يجب أخذها في الاعتبار.

الدقة

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

يمكن استبدال عناصر CSS الشائعة، مثل img وbutton وa، بأنماط صفحتك. أحد السيناريوهات الأكثر شيوعًا هو ضبط السمة max-width للعنصر img على %100. قد يؤدي ذلك إلى تشويه أو إخفاء مكونات الخريطة، لا سيما إذا كنت تستخدم InfoWindow.

لحلّ هذه المشكلة، يمكنك تعديل العنصر img لخريطتك بحيث يتم ضبط السمة max-width على none. مثال:

#map img
{
    max-width : none;
}

أسماء الصفوف

لا تُشِر إلى أسماء الفئات وعناصر DOM الداخلية لواجهة برمجة التطبيقات في خرائط JavaScript. لا يتوفّر هذا الإجراء ويمكن أن يؤدي إلى تغييرات قد تؤدي إلى موقعك الإلكتروني بدون إشعار مسبق. وبدلاً من ذلك، نقترح إنشاء فئات CSS خاصة بك كحاويات لخريطتك.

إذا كان إطار عمل CSS أو مكوّن JavaScript يستخدم هذا النوع من المراجع، قد يكون اقتراح إلغاء تحديد حجم المربع حلاً بديلاً.

تجاوز حجم مربع CSS

توفر تجاوزات تغيير حجم مربع CSS حلاً بديلاً محتملاً لتعارضات نمط الخرائط. يمكن أن يكون ذلك مفيدًا بشكل خاص إذا كنت تستخدم إطار عمل CSS أو مكوّن تصميم JavaScript. على سبيل المثال، إذا تم ضبط السمة box-sizing على border-box، يمكنك تجربة ما يلي:

  • يمكنك إنشاء خيار إلغاء box-sizing يؤدي إلى ضبط العنصر <html> على border-box.
  • استخدِم box-sizing: inherit لجميع العناصر باستثناء خريطتك.
  • أنشئ حاوية خريطة مخصّصة لإعادة ضبط العنصر box-sizing إلى initial.

مثال على لغة CSS:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}