সহায়তা

এই পৃষ্ঠায় ভেক্টর ম্যাপ ও WebGL ফিচারের ক্ষেত্রে পরিচিত সমস্যা ও তার সমাধান তালিকাভুক্ত করা আছে।

ব্রাউজার/ডিভাইস সংক্রান্ত সহায়তা

WebGL ফিচার প্রিভিউ, Maps JavaScript API-এর মতো একই ব্রাউজার ও ডিভাইসে কাজ করে। কোনও নির্দিষ্ট ডিভাইসের ব্রাউজার WebGL-এ কাজ করবে কিনা তা চেক করতে, get.webgl.org অথবা caniuse.com লিঙ্কে যান। এছাড়াও, ব্রাউজার সেটিংসে হার্ডওয়্যার অ্যাক্সিলারেশন চালু করা আছে কিনা তা নিশ্চিত করুন, অন্যথায় ভেক্টর ম্যাপ রাস্টার-এ ফিরে যাবে।

রাস্টার বা ভেক্টর?

কখনও কখনও, ভেক্টর ম্যাপ রাস্টারে ফিরে যেতে পারে। এটি হলে, ভেক্টর ম্যাপের উপর নির্ভর করে এমন ফিচার উপলভ্য থাকে না। বিভিন্ন কারণে র‍্যাস্টার ম্যাপে ফিরে যাওয়া হতে পারে। এই বিভাগ থেকে আপনি জানতে পারবেন কীভাবে আপনার ওয়েব ব্রাউজার সঠিকভাবে কনফিগার করতে হয় এবং ভেক্টর ম্যাপের ক্ষমতা আছে কিনা তা প্রোগ্রাম্যাটিক পদ্ধতিতে কীভাবে চেক করতে হয়।

Chrome-এ ব্রাউজারের ক্ষমতা চেক করুন

Chrome-এর নির্দিষ্ট ইনস্টলেশনে কোন হার্ডওয়্যার অ্যাক্সিলারেশন ক্ষমতা চালু আছে তা নির্ধারণ করতে, chrome://gpu/-এ নেভিগেট করুন এবং নিশ্চিত করুন যে নিম্নলিখিত আইটেমগুলি চালু আছে (সবুজ রঙে):

  • "OpenGL: চালু করা আছে"
  • "WebGL: হার্ডওয়্যার অ্যাক্সিলারেটেড"
  • "WebGL2: হার্ডওয়্যার অ্যাক্সিলারেটেড"

(এগুলি শুধুমাত্র প্রাথমিক প্রয়োজনীয়তা, অন্যান্য কারণও থাকতে পারে যা সহায়তার উপর প্রভাব ফেলে, নিচে "পরিচিত বাগ" দেখুন।)

হার্ডওয়্যার অ্যাক্সিলারেশন চালু করুন

ভেক্টর ম্যাপ যাতে কাজ করে, তার জন্য বেশিরভাগ ব্রাউজারে হার্ডওয়্যার অ্যাক্সিলারেশন চালু থাকতে হবে। Chrome ও Microsoft Edge-এ হার্ডওয়্যার অ্যাক্সিলারেশন চালু করতে, সেটিংস খুলুন, সিস্টেম বেছে নিন এবং উপলভ্য থাকলে হার্ডওয়্যার অ্যাক্সিলারেশন ব্যবহার করুন বিকল্প চালু আছে কিনা তা নিশ্চিত করুন।

প্রোগ্রামাটিক পদ্ধতিতে রাস্টার বা ভেক্টর চেক করা

map.getRenderingType() কল করে, আপনি প্রোগ্রাম্যাটিক্যালি চেক করে দেখতে পারবেন যে ম্যাপটি রাস্টার নাকি ভেক্টর। নিচের উদাহরণে renderingtype_changed ইভেন্ট মনিটর করার কোড দেখানো হয়েছে এবং রাস্টার বা ভেক্টর ম্যাপ ব্যবহার করা হচ্ছে কিনা তা দেখানোর জন্য একটি তথ্য উইন্ডো দেখানো হয়েছে।

TypeScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;

জাভাস্ক্রিপ্ট

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;

WebGL 2-এর জন্য সহায়তা চেক করতে আপনি WebGL রেন্ডারিং কনটেক্সটও ব্যবহার করতে পারেন:

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

প্রোগ্রাম্যাটিক্যালি WebGL রেন্ডারিং কনটেক্সট শনাক্ত করার অন্যান্য উপায় সম্পর্কে জানুন।

মোবাইল ওয়েব সহায়তা

মোবাইল ওয়েবে ভেক্টর ম্যাপ এখনও পরীক্ষামূলক পর্যায়ে আছে। ডেভেলপাররা মোবাইল ওয়েব ব্রাউজার শনাক্ত করতে ক্লায়েন্ট API ব্যবহার করতে পারেন এবং ভেক্টর ম্যাপের পরিবর্তে র‍্যাস্টার ম্যাপের সাথে যুক্ত ম্যাপ আইডি ব্যবহার করতে পারেন। কিছু মোবাইল ডিভাইসের ক্ষেত্রে রেন্ডারিং পারফর্ম্যান্স ধীরগতির হতে পারে বলে আমরা অনুমান করছি। মোবাইল ওয়েবে ভেক্টর ম্যাপ ব্যবহার করার বিকল্প বেছে নিলে, আমরা পারফর্ম্যান্স সংক্রান্ত পরিসংখ্যান ও মতামত পেলে খুব খুশি হব। উপরে যেমন বলা হয়েছে, ভেক্টর ম্যাপের জন্য সহায়তা উপলভ্য না থাকলে, ভেক্টর ম্যাপ আইডি অটোমেটিক র‍্যাস্টার ম্যাপে ফলব্যাক করবে।

পোকামাকড়

পরিচিত সমস্যা

  • AMD GPU সহ কিছু macOS ডিভাইসে Chrome-এ একটি পরিচিত সমস্যা আছে। একাধিক GPU সহ ডিভাইসে macOS যখন ডায়নামিকভাবে GPU-এর মধ্যে সুইচ করে, তখন এটি বিশেষভাবে বিভ্রান্তিকর হতে পারে, তাই অন্য কোন অ্যাপ চলছে বা কোনও এক্সটার্নাল মনিটর কানেক্ট করা আছে কিনা তার উপর নির্ভর করে ভেক্টর ম্যাপ উপলভ্য নাও হতে পারে। Chrome-এর আসন্ন ANGLE Metal ব্যাকএন্ড চালু করলে কিছু ক্ষেত্রে এই সমস্যার সমাধান হয়ে যায়। আপনি এর জন্য সাধারণ রোল-আউট প্ল্যান https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 লিঙ্কে দেখতে পারেন।

বাগ সম্পর্কে রিপোর্ট করা

  • বাগ সম্পর্কে অভিযোগ জানানোর আগে ব্রাউজার ও GPU ড্রাইভার লেটেস্ট ভার্সনে আপডেট করুন।
  • chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge)-এ হার্ডওয়্যার অ্যাক্সিলারেশন সেটিং চালু করা আছে কিনা তা নিশ্চিত করুন। Safari-তে, macOS ভার্সন 10.15 বা এর পরের যেকোনও ভার্সনে এই সেটিং অটোমেটিক চালু হয়ে যায়। MacOS-এর পুরনো ভার্সনের জন্য, Safari-এর উন্নত সেটিংসে যান এবং "হার্ডওয়্যার অ্যাক্সিলারেশন ব্যবহার করুন" বিকল্পটি চালু আছে কিনা তা নিশ্চিত করুন।
  • সমস্যার রিপোর্টে jsfiddle স্যাম্পেল কোডের লিঙ্ক যোগ করুন।
  • এছাড়াও, chrome://gpu (Chrome), about:support (Firefox) বা edge://gpu (Microsoft Edge)-এর স্ক্রিনশট নিন, আপনি কোনও রেন্ডারিং সমস্যার সম্মুখীন হলে বাগ রিপোর্টে GPU সম্পর্কিত তথ্য অ্যাটাচ করুন।

আপনি কী ভাবছেন আমাদের বলুন!

আপনার মতামত আমাদের কাছে অত্যন্ত গুরুত্বপূর্ণ কারণ আমরা আপনার এবং আপনার গ্রাহকদের জন্য সেরা ভেক্টর ম্যাপের অভিজ্ঞতা প্রদান করার চেষ্টা করি। আমাদের জানান যদি:

  • আপনার ওয়েব অ্যাপে কোনও নতুন জাভাস্ক্রিপ্ট সংক্রান্ত সমস্যা বা বাগ/ক্র্যাশ শনাক্ত করা হয়েছে।
  • ভেক্টর ম্যাপের স্টার্টআপ লেটেন্সি র‍্যাস্টার ম্যাপের তুলনায় অনেক বেশি। এমনটি হলে, স্টার্ট-আপ লেটেন্সি রিগ্রেশনের মেট্রিক খুবই সহায়ক। সাধারণত, আমরা জানতে চাই যে স্টার্ট-আপ লেটেন্সি গ্রহণযোগ্য থ্রেশহোল্ডের বাইরে রিগ্রেস করে কিনা।
  • ভেক্টর ম্যাপের অভিজ্ঞতা যতটা মসৃণ হতে পারত ততটা নয়। আপনি যদি FPS বা জ্যাঙ্ক মেট্রিক লগ করেন, তাহলে ভেক্টর এবং র‍্যাস্টার ম্যাপের মধ্যে সেগুলি কীভাবে তুলনা করবেন?
  • ব্রাউজার অনুযায়ী পারফর্ম্যান্স আলাদা আলাদা হতে পারে।

আপনি যদি ভেক্টর ম্যাপের সাথে র‍্যাস্টার ম্যাপের তুলনা করার জন্য A/B টেস্টিং সেট-আপ করে থাকেন, তাহলে আপনার পাওয়া পারফর্ম্যান্স সংক্রান্ত মতামত শেয়ার করুন, কারণ এটি ফিচারকে আরও উন্নত করতে আমাদের সাহায্য করবে।