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

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

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