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

JS সেরা অনুশীলন

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

মানচিত্র জাভাস্ক্রিপ্ট API এর সাথে বেমানান বলে পরিচিত লাইব্রেরি:

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

কখনও কখনও অ-মানক ওভাররাইডগুলি সরাতে বেমানান লাইব্রেরিগুলি সংশোধন করা সম্ভব।

CSS সেরা অভ্যাস

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

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

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

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

বিশেষত্ব

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

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

এই সমস্যাটি সমাধান করতে, আপনি আপনার মানচিত্রের জন্য img উপাদানটি আপডেট করতে পারেন যাতে max-width বৈশিষ্ট্যটি none । যেমন:

#map img
{
    max-width : none;
}

ক্লাসের নাম

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

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

CSS বক্স-আকার ওভাররাইড

CSS বক্স-সাইজিং ওভাররাইডগুলি মানচিত্রের স্টাইলিং দ্বন্দ্বগুলির জন্য একটি সম্ভাব্য সমাধান প্রদান করে৷ আপনি যদি একটি 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;
}