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

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

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

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

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

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

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

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