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

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

ממשק ה-API של JavaScript במפות Google פועל רק בסביבת 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() בצורה לא סטנדרטית.

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

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

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