بهترین شیوه‌های جاوا اسکریپت
API جاوا اسکریپت Maps فقط با محیط استاندارد ECMAScript و W3C DOM کار می‌کند. این بدان معناست که تغییر یا لغو رفتار کلاس‌ها و اشیاء داخلی ارائه شده توسط مرورگر می‌تواند API جاوا اسکریپت Maps را غیرفعال کند. گاهی اوقات کتابخانه‌های دیگر می‌توانند با تغییر رفتار مرورگر با API جاوا اسکریپت Maps تداخل داشته باشند، به طوری که دیگر یک محیط استاندارد ECMAScript نباشد. API جاوا اسکریپت Maps با آن کتابخانه‌ها سازگار نیست.
کتابخانه‌هایی که با API جاوا اسکریپت Maps ناسازگار هستند:
- Prototype:
Array.from()وElement.prototype.remove()را به روش‌های غیراستاندارد بازنویسی می‌کند. - MooTools (نسخه‌های قدیمی‌تر):
Array.from()به روشی غیر استاندارد بازنویسی می‌کند. - DateJS (نسخه‌های قدیمی‌تر):
Date.now()را به روشی غیر استاندارد بازنویسی می‌کند.
گاهی اوقات می‌توان کتابخانه‌های ناسازگار را تغییر داد تا overrideهای غیراستاندارد حذف شوند.
بهترین شیوه‌های CSS
وقتی نقشه‌ای را با استفاده از Maps JavaScript API اضافه یا سفارشی می‌کنید، برخی از سبک‌هایی که به صفحه وب خود اعمال می‌کنید ممکن است سبک‌های نقشه شما را نادیده گرفته و باعث تداخل CSS شوند. اگر از یک چارچوب CSS یا یک کامپوننت جاوا اسکریپت برای استایل‌بندی استفاده می‌کنید، این ممکن است تداخل‌های CSS بیشتری با سبک‌های نقشه شما ایجاد کند.
چارچوب‌های CSS و اجزای استایل‌دهی جاوا اسکریپت اغلب از یک تنظیم مجدد CSS یا یک نرمال‌ساز برای مدیریت تفاوت‌های رندر بین مرورگرها استفاده می‌کنند. چارچوب‌ها اغلب از عنصر box-sizing برای مقیاس‌بندی حاشیه‌ها و مرزهای عناصر صفحه وب استفاده می‌کنند. این معمولاً شامل تغییر رفتار پیش‌فرض مرورگر از استفاده از content-box به border-box است.
این نوع تنظیم مجدد CSS می‌تواند باعث تداخل CSS با Maps JavaScript API شود زیرا API از تغییرات در شیوه‌نامه عامل کاربر پشتیبانی نمی‌کند. تداخل‌های CSS دیگری نیز ممکن است رخ دهد اگر چارچوب یا کامپوننت به کلاس‌های CSS یا عناصر DOM از Maps JavaScript API ارجاع دهد.
برای جلوگیری از این درگیری‌ها، چندین توصیه داریم که باید در نظر گرفته شوند.
ویژگی
CSS جاسازی‌شده و پیوندشده قبل از استایل‌های نقشه‌های گوگل روی نقشه شما اعمال می‌شود. اگر تمام استایل‌های صفحه شما در CSS جاسازی‌شده یا پیوندشده تعریف شده‌اند، قوانین اختصاصی بودن را دنبال کنید تا مطمئن شوید استایل‌های صحیح روی نقشه شما اعمال می‌شوند.
عناصر رایج CSS، مانند img ، button و a می‌توانند توسط استایل‌های صفحه شما بازنویسی شوند. یکی از رایج‌ترین سناریوها زمانی است که ویژگی max-width عنصر img روی ۱۰۰ درصد تنظیم شده باشد. این می‌تواند باعث اعوجاج یا پنهان شدن اجزای نقشه شود، به خصوص اگر از InfoWindow استفاده می‌کنید.
برای رفع این مشکل، می‌توانید عنصر img نقشه خود را به‌روزرسانی کنید تا ویژگی max-width روی none تنظیم شود. برای مثال:
#map img
{
max-width : none;
}
نام کلاس‌ها
به نام کلاس‌ها و عناصر داخلی DOM مربوط به API نقشه‌های جاوا اسکریپت اشاره نکنید. این کار پشتیبانی نمی‌شود و می‌تواند بدون اطلاع قبلی باعث ایجاد تغییرات مخرب در وب‌سایت شما شود. در عوض، توصیه می‌کنیم کلاس‌های CSS خودتان را به عنوان کانتینر برای نقشه خود ایجاد کنید.
اگر یک چارچوب CSS یا کامپوننت جاوا اسکریپت از این نوع ارجاعات استفاده کند، توصیه ما برای تغییر اندازه کادر می‌تواند به عنوان یک راه حل عمل کند.
نادیده گرفتن اندازه کادر CSS
لغو اندازه جعبه در CSS یک راه حل ممکن برای تداخل سبک نقشه‌ها ارائه می‌دهد. این امر به ویژه در صورتی که از یک چارچوب CSS یا یک جزء سبک جاوا اسکریپت استفاده می‌کنید، می‌تواند مفید باشد. برای مثال، اگر box-sizing روی border-box تنظیم شده باشد، موارد زیر را امتحان کنید:
- یک override
box-sizingایجاد کنید که عنصر<html>را رویborder-boxتنظیم کند. - برای همه عناصر غیر از نقشه خود از
box-sizing: inheritاستفاده کنید. - یک کانتینر نقشه سفارشی ایجاد کنید که عنصر
box-sizingرا بهinitialبازنشانی کند.
مثال سی اس اس:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.container-map {
box-sizing: initial;
}