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

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

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

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

שינוי מברירת המחדל של box-sizing ב-CSS

שינוי ברירת המחדל של גודל התיבה ב-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;
}