পেশাদার পদ্ধতি

JS পেশাদার পদ্ধতি

ওভাররাইড আচরণ ও লাইব্রেরি কম্প্যাটিবিলিটি

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 পেশাদার পদ্ধতি

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 কনফ্লিক্ট হতে পারে।

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

নির্দিষ্টতা

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

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

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

#map img
{
    max-width : none;
}

ক্লাসের নাম

JavaScript Maps API-এর ক্লাস নাম এবং ইন্টার্নাল DOM এলিমেন্ট রেফারেন্স করবেন না। এটি কাজ করে না এবং এর ফলে আপনার ওয়েবসাইটে কোনও বিজ্ঞপ্তি ছাড়াই ব্রেকিং পরিবর্তন হতে পারে। পরিবর্তে, আমরা সাজেস্ট করি যে আপনি নিজের ম্যাপের জন্য কন্টেনার হিসেবে আপনার নিজস্ব CSS ক্লাস তৈরি করুন।

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

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

CSS বক্স-সাইজিং ওভাররাইড ম্যাপ স্টাইলিং সংক্রান্ত সমস্যার সম্ভাব্য সমাধান প্রদান করে। আপনি CSS ফ্রেমওয়ার্ক বা JavaScript স্টাইলিং কম্পোনেন্ট ব্যবহার করলে এটি বিশেষভাবে উপযোগী হতে পারে। যেমন, 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;
}