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

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

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

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

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

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

ביטול הגדרת box-sizing ב-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;
}