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

שיטות מומלצות ל-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 לסגנונות המפה שלכם.

בדרך כלל, רכיבי סגנון של 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;
}