সর্বোত্তম অনুশীলন

জেএস সেরা অনুশীলন

ম্যাপস জাভাস্ক্রিপ্ট এপিআই শুধুমাত্র একটি স্ট্যান্ডার্ড ECMAScript এবং W3C DOM পরিবেশে কাজ করে। এর মানে হলো, ব্রাউজার দ্বারা প্রদত্ত বিল্ট-ইন ক্লাস এবং অবজেক্টের আচরণ পরিবর্তন বা ওভাররাইড করলে ম্যাপস জাভাস্ক্রিপ্ট এপিআই অকার্যকর হয়ে যেতে পারে। কখনও কখনও অন্যান্য লাইব্রেরি ব্রাউজারের আচরণ পরিবর্তন করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর সাথে সংঘাত তৈরি করতে পারে, যার ফলে ব্রাউজারটি আর একটি স্ট্যান্ডার্ড ECMAScript পরিবেশে থাকে না। ম্যাপস জাভাস্ক্রিপ্ট এপিআই সেইসব লাইব্রেরির সাথে সামঞ্জস্যপূর্ণ নয়।

যে লাইব্রেরিগুলো Maps JavaScript API-এর সাথে বেমানান বলে পরিচিত:

  • প্রোটোটাইপ: Array.from() এবং Element.prototype.remove() কে অপ্রচলিত উপায়ে ওভাররাইড করে।
  • MooTools (পুরানো সংস্করণ): একটি অ-প্রমিত উপায়ে Array.from() কে ওভাররাইড করে।
  • DateJS (পুরানো সংস্করণ): Date.now() একটি অ-প্রমিত উপায়ে ওভাররাইড করে।

কখনও কখনও অসামঞ্জস্যপূর্ণ লাইব্রেরিগুলো পরিবর্তন করে অ-মানক ওভাররাইডগুলো অপসারণ করা সম্ভব।

সিএসএস সেরা অনুশীলন

আপনি যখন Maps JavaScript API ব্যবহার করে কোনো ম্যাপ যোগ বা কাস্টমাইজ করেন, তখন আপনার ওয়েবপেজে প্রয়োগ করা কিছু স্টাইল আপনার ম্যাপের স্টাইলগুলোকে ওভাররাইড করে CSS কনফ্লিক্ট তৈরি করতে পারে। আপনি যদি স্টাইলিংয়ের জন্য কোনো CSS ফ্রেমওয়ার্ক বা জাভাস্ক্রিপ্ট কম্পোনেন্ট ব্যবহার করেন, তবে এটি আপনার ম্যাপের স্টাইলগুলোর সাথে অতিরিক্ত CSS কনফ্লিক্ট তৈরি করতে পারে।

ব্রাউজারগুলোর মধ্যে রেন্ডারিংয়ের পার্থক্য সামাল দিতে CSS ফ্রেমওয়ার্ক এবং জাভাস্ক্রিপ্ট স্টাইলিং কম্পোনেন্টগুলো প্রায়শই CSS রিসেট বা নর্মালাইজার ব্যবহার করে। ফ্রেমওয়ার্কগুলো ওয়েব পেজের এলিমেন্টগুলোর মার্জিন ও বর্ডার স্কেল করার জন্য প্রায়শই box-sizing এলিমেন্ট ব্যবহার করে। এর জন্য সাধারণত ব্রাউজারের ডিফল্ট আচরণ content-box থেকে border-box পরিবর্তন করতে হয়।

এই ধরনের CSS রিসেট Maps JavaScript API-এর সাথে CSS দ্বন্দ্ব সৃষ্টি করতে পারে, কারণ API-টি ইউজার এজেন্ট স্টাইলশীটে কোনো পরিবর্তন সমর্থন করে না। যদি ফ্রেমওয়ার্ক বা কম্পোনেন্টটি Maps JavaScript API-এর CSS ক্লাস বা DOM এলিমেন্ট রেফারেন্স করে, তাহলে অতিরিক্ত CSS দ্বন্দ্ব ঘটতে পারে।

এই সংঘাতগুলো এড়ানোর জন্য আমাদের কয়েকটি সুপারিশ রয়েছে যা বিবেচনা করা যেতে পারে।

নির্দিষ্টতা

এমবেডেড এবং লিঙ্কড CSS আপনার ম্যাপে গুগল ম্যাপস স্টাইলের আগে প্রয়োগ করা হয়। যদি আপনার পেজের সমস্ত স্টাইল এমবেডেড বা লিঙ্কড CSS-এ সংজ্ঞায়িত করা থাকে, তাহলে আপনার ম্যাপে সঠিক স্টাইলগুলো প্রয়োগ করা নিশ্চিত করতে স্পেসিফিসিটি নিয়মগুলো অনুসরণ করুন।

সাধারণ CSS এলিমেন্ট, যেমন img , button , এবং a আপনার পেজের স্টাইল দ্বারা ওভাররাইট হয়ে যেতে পারে। সবচেয়ে সাধারণ পরিস্থিতিগুলোর মধ্যে একটি হলো যখন img এলিমেন্টের max-width অ্যাট্রিবিউট ১০০ শতাংশে সেট করা থাকে। এর ফলে ম্যাপের কম্পোনেন্টগুলো বিকৃত বা অদৃশ্য হয়ে যেতে পারে, বিশেষ করে যদি আপনি InfoWindow ব্যবহার করেন।

এই সমস্যাটি সমাধান করতে, আপনি আপনার ম্যাপের img এলিমেন্টটি আপডেট করে এর max-width অ্যাট্রিবিউটটির মান none সেট করতে পারেন। উদাহরণস্বরূপ:

#map img
{
    max-width : none;
}

শ্রেণী নাম

জাভাস্ক্রিপ্ট ম্যাপস এপিআই (JavaScript Maps API)-এর ক্লাস নেম এবং অভ্যন্তরীণ ডোম (DOM) এলিমেন্ট রেফারেন্স করবেন না। এটি সমর্থিত নয় এবং কোনো পূর্বসূচনা ছাড়াই আপনার ওয়েবসাইটে বড় ধরনের পরিবর্তন (breaking changes) ঘটাতে পারে। এর পরিবর্তে, আমরা আপনাকে আপনার ম্যাপের কন্টেইনার হিসেবে নিজস্ব সিএসএস (CSS) ক্লাস তৈরি করার পরামর্শ দিই।

যদি কোনো CSS ফ্রেমওয়ার্ক বা জাভাস্ক্রিপ্ট কম্পোনেন্ট এই ধরনের রেফারেন্স ব্যবহার করে, তাহলে আমাদের বক্স-সাইজিং ওভাররাইড করার পরামর্শটি একটি বিকল্প সমাধান হিসেবে কাজ করতে পারে।

CSS বক্স-সাইজিং ওভাররাইড

ম্যাপের স্টাইলিং দ্বন্দ্বের জন্য 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;
}