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

أفضل الممارسات المتعلّقة بJavaScript

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

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

  • النموذج الأولي: تلغي 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 لـ "خرائط Google"، لأنّ واجهة برمجة التطبيقات لا تتيح إجراء تغييرات على ملف أسلوب وكيل المستخدم. يمكن أن تحدث تعارضات إضافية في 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 Maps API. لا يُسمح بذلك، ويمكن أن يؤدي إلى تغييرات جذرية في موقعك الإلكتروني بدون إشعار. بدلاً من ذلك، ننصحك بإنشاء فئات CSS الخاصة بك كأحد حاويات الخريطة.

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

إلغاء CSS box-sizing

توفّر عمليات إلغاء ضبط حجم الصندوق في 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;
}