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

שיטות מומלצות לשימוש ב-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

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