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

שיטות עבודה מומלצות של JS

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

ספריות שידוע שאינן תואמות ל-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 נוספות יכולות להתרחש אם ה-framework או הרכיב מפנים למחלקות CSS או לרכיבי DOM של ה-API JavaScript של מפות Google.

כדי למנוע התנגשויות כאלה, יש לנו כמה המלצות שכדאי לשקול.

ספציפיות

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 משלכם בתור קונטיינרים של המפה.

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

שינוי של גודל תיבת ה-CSS

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