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

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

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

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

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

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

שיטות מומלצות לעבודה עם שירותי CSS

כשמוסיפים או מתאימים אישית מפה באמצעות Maps JavaScript API, חלק מהסגנונות שמחילים על דף האינטרנט עשויים לשנות את סגנונות המפה ולגרום להתנגשויות ב-CSS. אם אתם משתמשים ב-framework של CSS או ברכיב JavaScript עבור עיצוב, הפעולה הזו עלולה לגרום להתנגשויות CSS נוספות עם סגנונות המפה.

frameworks של CSS ורכיבי עיצוב JavaScript משתמשים לעיתים קרובות באיפוס CSS או במנורמל כדי להתמודד עם הבדלים בעיבוד בין דפדפנים. הרבה פעמים, מסגרות משתמשות ברכיב box-sizing כדי להגדיל את השוליים והגבולות של רכיבים בדפי אינטרנט. בדרך כלל התהליך הזה כולל שינוי התנהגות ברירת המחדל של הדפדפן משימוש ב-content-box ל-border-box.

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

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

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

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