שיטות מומלצות לעבודה עם 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;
}