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

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

Maps JavaScript API শুধুমাত্র একটি স্ট্যান্ডার্ড 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 ব্যবহার করে একটি মানচিত্র যোগ করেন বা কাস্টমাইজ করেন, তখন আপনার ওয়েবপৃষ্ঠায় প্রয়োগ করা কিছু শৈলী আপনার মানচিত্র শৈলীগুলিকে ওভাররাইড করতে পারে এবং CSS দ্বন্দ্ব তৈরি করতে পারে। আপনি যদি স্টাইলিংয়ের জন্য একটি CSS ফ্রেমওয়ার্ক বা একটি JavaScript উপাদান ব্যবহার করেন, তাহলে এটি আপনার মানচিত্র শৈলীর সাথে অতিরিক্ত 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 অ্যাট্রিবিউট 100 শতাংশে সেট করা হয়। এর ফলে মানচিত্রের উপাদানগুলি বিকৃত বা লুকানো হতে পারে, বিশেষ করে যদি আপনি InfoWindow ব্যবহার করেন।

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

#map img
{
    max-width : none;
}

ক্লাসের নাম

জাভাস্ক্রিপ্ট ম্যাপস এপিআই-এর ক্লাসের নাম এবং অভ্যন্তরীণ DOM উপাদান উল্লেখ করবেন না। এটি সমর্থিত নয় এবং কোনও নোটিশ ছাড়াই আপনার ওয়েবসাইটে উল্লেখযোগ্য পরিবর্তন আনতে পারে। পরিবর্তে, আমরা আপনাকে আপনার মানচিত্রের জন্য কন্টেইনার হিসেবে নিজস্ব CSS ক্লাস তৈরি করার পরামর্শ দিচ্ছি।

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

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

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

  • একটি 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;
}