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

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

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

المكتبات المعروف عنها غير المتوافقة مع واجهة برمجة تطبيقات JavaScript للخرائط:

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

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

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

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

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

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

لتجنُّب هذا التعارض، نقترح عليك عدّة اقتراحات.

الدقة

يتم تطبيق 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;
}