שיטות מומלצות

שיטות מומלצות לשימוש ב-JS

התנהגות של שינוי ברירת המחדל ותאימות לספריות

‫Maps JavaScript API פועל רק עם סביבת ECMAScript ו-W3C DOM רגילה. כלומר, שינוי או ביטול של ההתנהגות של המחלקות והאובייקטים המובְנים שהדפדפן מספק עלולים לגרום לכך ש-Maps JavaScript API לא יפעל. לפעמים ספריות אחרות יכולות להתנגש עם Maps JavaScript API, כי הן משנות את ההתנהגות של הדפדפן כך שהוא כבר לא סביבת ECMAScript רגילה. ‫Maps JavaScript API לא תואם לספריות האלה.

ספריות שידוע שהן לא תואמות ל-Maps JavaScript API:

  • אב טיפוס: משנה את Array.from() ו-Element.prototype.remove() בדרכים לא סטנדרטיות.
  • ‫MooTools (גרסאות ישנות יותר): מבטל את Array.from() באופן לא סטנדרטי.
  • ‫DateJS (גרסאות ישנות יותר): מבטל את Date.now() באופן לא סטנדרטי.

לפעמים אפשר לשנות ספריות לא תואמות כדי להסיר את ההגדרות הלא סטנדרטיות.

אופטימיזציה פנימית של הביצועים

כדי לשפר את מהירות הטעינה של הדפים, יכול להיות ש-Maps JavaScript API ידחה באופן פנימי את הטעינה של תוכן אינטראקטיבי עד שהרכיב או מאגר התגים יתקרבו לאזור התצוגה. האופטימיזציות הפנימיות האלה יכולות להשתנות בכל שלב, בלי הודעה מוקדמת. הם נועדו לשפר את הביצועים, ולא לשמש כמנגנון לניהול החיוב. כדי לוודא שלא יתבצע חיוב עד שרכיב מסוים יהיה גלוי, צריך לדחות את היצירה שלו בקוד האפליקציה.

שיטות מומלצות לשימוש ב-CSS

כשמוסיפים או מתאימים אישית מפה באמצעות Maps JavaScript API, חלק מהסגנונות שמוסיפים לדף האינטרנט עלולים לשנות את סגנונות המפה ולגרום להתנגשויות ב-CSS. אם אתם משתמשים ב-CSS framework או ברכיב JavaScript לעיצוב, יכול להיות שיהיו עוד התנגשויות של CSS עם סגנונות המפה.

במסגרות CSS וברכיבי עיצוב של JavaScript, לעיתים קרובות משתמשים באיפוס CSS או בנורמליזציה כדי לטפל בהבדלים ברינדור בין דפדפנים. במסגרות רבות משתמשים ברכיב box-sizing כדי לשנות את הגודל של השוליים והגבולות של רכיבים בדף האינטרנט. בדרך כלל זה כולל שינוי של התנהגות ברירת המחדל של הדפדפן משימוש ב-content-box לשימוש ב-border-box.

איפוס CSS מהסוג הזה יכול לגרום להתנגשויות CSS עם Maps JavaScript API, כי ה-API לא תומך בשינויים בגיליון הסגנונות של סוכן המשתמש. יכולות להיות התנגשויות נוספות ב-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 ב-Maps JavaScript API. הפעולה הזו לא נתמכת ועלולה לגרום לשינויי תוכנה שעלולים לגרום לכשל באתר בלי הודעה מוקדמת. במקום זאת, מומלץ ליצור מחלקות CSS משלכם שישמשו כמכלים למפה.

אם מסגרת CSS או רכיב JavaScript משתמשים בהפניות מהסוג הזה, ההמלצה שלנו לשינוי ברירת המחדל של box-sizing יכולה לשמש כפתרון עקיף.

שינוי ברירת המחדל של CSS box-sizing

אפשר להשתמש בשינוי ברירת המחדל של box-sizing ב-CSS כדי לפתור התנגשויות בעיצוב סגנון המפה. זה יכול להיות שימושי במיוחד אם אתם משתמשים ב-CSS framework או ברכיב עיצוב של 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;
}