روال‌های مطلوب JS
لغو رفتار و سازگاری کتابخانه
میانای برنامه‌سازی کاربردی جاوا اسکریپت در Maps فقط با محیط استاندارد ECMAScript و W3C DOM کار می‌کند. این یعنی اصلاح یا لغو رفتار کلاس‌ها و اشیاء توکار ارائه‌شده توسط مرورگر می‌تواند Maps JavaScript API را غیرفعال کند. گاهی اوقات کتابخانه‌های دیگر می‌توانند با Maps JavaScript API تداخل داشته باشند و رفتار مرورگر را تغییر دهند به‌طوری‌که دیگر محیط استاندارد ECMAScript نباشد. Maps JavaScript API با آن کتابخانه‌ها سازگار نیست.
کتابخانه‌هایی که مشخص شده است با Maps JavaScript API ناسازگارند:
- نمونه اولیه:
Array.from()وElement.prototype.remove()را به‌روش‌های غیراستاندارد لغو می‌کند. - MooTools (نسخه‌های قدیمی‌تر):
Array.from()را به‌صورت غیراستاندارد لغو می‌کند. - DateJS (نسخه‌های قدیمی‌تر):
Date.now()را به‌صورت غیراستاندارد لغو می‌کند.
گاهی اوقات می‌توان کتابخانه‌های ناسازگار را اصلاح کرد تا لغوهای غیراستاندارد برداشته شود.
بهینه‌سازی عملکرد داخلی
برای بهبود سرعت بار کردن صفحه، Maps JavaScript API ممکن است به‌طور داخلی بار کردن محتوای تعاملی را تا زمانی که عنصر یا ظرف به نمای هدف نزدیک شود به‌تأخیر بیندازد. این بهینه‌سازی‌های داخلی ممکن است در هر زمانی، بدون اطلاع قبلی، تغییر کنند. این ویژگی‌ها برای بهبود عملکرد طراحی شده‌اند و نباید به‌عنوان سازوکاری برای مدیریت صورت‌حساب استفاده شوند. برای اطمینان از اینکه تا زمانی که عنصر نمایان نشده است، صورت‌حساب صادر نمی‌شود، ایجاد آن را در کد برنامه خود به‌تعویق بیندازید.
روال‌های مطلوب «سرویس مقایسه قیمت»
وقتی بااستفاده از Maps JavaScript API نقشه‌ای را اضافه یا سفارشی‌سازی می‌کنید، برخی‌از سبک‌هایی که در صفحه وب خود اعمال می‌کنید ممکن است سبک‌های نقشه شما را لغو کند و باعث تداخل CSS شود. اگر از چارچوب CSS یا مؤلفه JavaScript برای سبک‌بندی استفاده می‌کنید، این کار ممکن است تداخل‌های CSS بیشتری با سبک‌های نقشه شما ایجاد کند.
چارچوب‌های CSS و مؤلفه‌های سبک‌دهی جاوا اسکریپت اغلب از بازنشانی CSS یا
نرمال‌ساز برای مدیریت تفاوت‌های پردازش بین مرورگرها استفاده می‌کنند. چارچوب‌ها اغلب از عنصر box-sizing برای مقیاس‌بندی حاشیه‌ها و مرزهای عناصر صفحه وب استفاده می‌کنند. این کار معمولاً شامل تغییر رفتار پیش‌فرض مرورگر از استفاده از
content-box به border-box است.
این نوع بازنشانی CSS می‌تواند باعث تداخل CSS با Maps JavaScript API شود زیرا این API از تغییرات در برگه سبک نگارش نماینده کاربر پشتیبانی نمی‌کند. اگر چارچوب یا عنصر به کلاس‌های CSS یا عناصر DOM در Maps JavaScript API ارجاع دهد، ممکن است تداخل‌های CSS دیگری رخ دهد.
برای جلوگیری از این تعارض‌ها، چند توصیه داریم که باید درنظر بگیرید.
ویژگی
CSS جاسازی‌شده و پیوندشده قبل‌از سبک‌های Google Maps روی نقشه شما اعمال می‌شود. اگر همه سبک‌های صفحه‌تان در CSS جاسازی‌شده یا پیوندشده تعریف شده است، قوانین اختصاصی را دنبال کنید تا مطمئن شوید سبک‌های صحیح در نقشه‌تان اعمال شده است.
عناصر CSS رایج، مانند img، button، و a می‌توانند توسط
سبک‌های صفحه شما بازنویسی شوند. یکی از رایج‌ترین سناریوها زمانی است که مشخصه max-width
عنصر img روی ۱۰۰ درصد تنظیم شده باشد. این کار می‌تواند باعث اعوجاج
یا پنهان شدن مؤلفه‌های نقشه شود، به‌ویژه اگر از
InfoWindow استفاده می‌کنید.
برای رفع این مشکل، می‌توانید عنصر img را برای نقشه‌تان به‌روز کنید تا
ویژگی max-width روی none تنظیم شود. برای مثال:
#map img
{
max-width : none;
}
نام کلاس‌ها
به نام‌های کلاس و عناصر DOM داخلی Maps JavaScript API ارجاع ندهید. این مورد پشتیبانی نمی‌شود و می‌تواند بدون اطلاع قبلی باعث ایجاد تغییرات مخرب در وب‌سایت شما شود. درعوض، توصیه می‌کنیم کلاس‌های CSS خودتان را به‌عنوان نگهدارنده برای نقشه‌تان ایجاد کنید.
اگر چارچوب CSS یا مؤلفه JavaScript از این نوع ارجاع‌ها استفاده می‌کند، توصیه لغو box-sizing ما ممکن است به‌عنوان راه‌حل موقت عمل کند.
لغو کردن CSS box-sizing
لغو کردن‌های CSS box-sizing راه‌حل احتمالی برای تداخل‌های سبک‌بندی نقشه‌ها ارائه می‌دهد. این کار به‌ویژه زمانی مفید است که از چارچوب CSS یا مؤلفه سبک‌بندی جاوا اسکریپت استفاده می‌کنید. برای مثال، اگر 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;
}