তথ্য উইন্ডোজ

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

ভূমিকা

একটি InfoWindow ম্যাপের উপরে একটি নির্দিষ্ট স্থানে একটি পপ-আপ উইন্ডোতে বিষয়বস্তু (সাধারণত টেক্সট বা ছবি) প্রদর্শন করে। ইনফোউইন্ডোটির একটি বিষয়বস্তু এলাকা এবং একটি সরু ডাঁটা থাকে। ডাঁটার অগ্রভাগটি ম্যাপের একটি নির্দিষ্ট স্থানের সাথে সংযুক্ত থাকে। স্ক্রিন রিডারের কাছে ইনফোউইন্ডোগুলো একটি ডায়ালগ হিসেবে প্রদর্শিত হয়।

সাধারণত আপনি একটি মার্কারের সাথে একটি ইনফো উইন্ডো সংযুক্ত করবেন, কিন্তু আপনি একটি নির্দিষ্ট অক্ষাংশ/দ্রাঘিমাংশের সাথেও একটি ইনফো উইন্ডো সংযুক্ত করতে পারেন, যেমনটি নীচে ইনফো উইন্ডো যোগ করার বিভাগে বর্ণনা করা হয়েছে।

সাধারণ কথায় বলতে গেলে, তথ্য উইন্ডোগুলো এক ধরনের ওভারলে। অন্যান্য ধরনের ওভারলে সম্পর্কে জানতে, ‘মানচিত্রে অঙ্কন’ দেখুন।

ইঙ্গিত: যদি আপনি কোনো মার্কারে একটিমাত্র লেখা প্রদর্শন করতে চান, তাহলে আপনি একটি মার্কার লেবেল ব্যবহার করতে পারেন।

পরামর্শ: তথ্য উইন্ডো ব্যবহারের আরও উদাহরণের জন্য স্টোর লোকেটর সমাধানগুলো দেখে নিন।

একটি তথ্য উইন্ডো যোগ করুন

InfoWindow কনস্ট্রাক্টরটি একটি InfoWindowOptions অবজেক্ট লিটারেল গ্রহণ করে, যা ইনফো উইন্ডোটি প্রদর্শনের জন্য প্রাথমিক প্যারামিটারগুলো নির্দিষ্ট করে।

InfoWindowOptions অবজেক্ট লিটারেলটিতে নিম্নলিখিত ফিল্ডগুলো রয়েছে:

• content তথ্য উইন্ডোতে প্রদর্শনের জন্য একটি টেক্সট স্ট্রিং অথবা একটি DOM নোড থাকে।
• pixelOffset ইনফো উইন্ডোর অগ্রভাগ থেকে উইন্ডোটি যেখানে অ্যাঙ্কর করা আছে, সেই অবস্থান পর্যন্ত একটি অফসেট থাকে। বাস্তবে, আপনার এই ফিল্ডটি নির্দিষ্ট করার প্রয়োজন হবে না। আপনি এটিকে ডিফল্ট মানেই রেখে দিতে পারেন।
• position সেই LatLng থাকে যেখানে এই ইনফো উইন্ডোটি অ্যাঙ্কর করা আছে। দ্রষ্টব্য: একটি InfoWindow একটি Marker অবজেক্টের সাথে (সেক্ষেত্রে এর পজিশন মার্কারের অবস্থানের উপর ভিত্তি করে নির্ধারিত হয়) অথবা সরাসরি ম্যাপের উপর একটি নির্দিষ্ট LatLng এ সংযুক্ত করা যেতে পারে। LatLng পাওয়ার একটি উপায় হলো জিওকোডিং সার্ভিস ব্যবহার করা। কোনো মার্কারের উপর ইনফো উইন্ডো খুললে তার position স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাবে।
• maxWidth পিক্সেল-এ ইনফো উইন্ডোর সর্বোচ্চ প্রস্থ নির্দিষ্ট করে। ডিফল্টরূপে, একটি ইনফো উইন্ডো তার বিষয়বস্তুর সাথে মানানসই হতে প্রসারিত হয় এবং যদি ইনফো উইন্ডোটি ম্যাপটি পূর্ণ করে ফেলে, তবে টেক্সট স্বয়ংক্রিয়ভাবে র‍্যাপ হয়ে যায়। আপনি যদি একটি maxWidth যোগ করেন, তবে ইনফো উইন্ডোটি নির্দিষ্ট প্রস্থ বজায় রাখতে স্বয়ংক্রিয়ভাবে র‍্যাপ করবে। যদি এটি সর্বোচ্চ প্রস্থে পৌঁছে যায় এবং স্ক্রিনে উল্লম্বভাবে জায়গা থাকে, তবে ইনফো উইন্ডোটি উল্লম্বভাবে প্রসারিত হতে পারে।

InfoWindow এর বিষয়বস্তুতে একটি টেক্সট স্ট্রিং, HTML-এর একটি অংশ বা একটি DOM এলিমেন্ট থাকতে পারে। বিষয়বস্তু সেট করার জন্য, হয় InfoWindowOptions এর মধ্যে তা নির্দিষ্ট করে দিন অথবা InfoWindow এর উপর স্পষ্টভাবে setContent() কল করুন।

আপনি যদি কন্টেন্টের আকার নির্দিষ্টভাবে নিয়ন্ত্রণ করতে চান, তবে সেটিকে একটি <div> এলিমেন্টের মধ্যে রেখে CSS দিয়ে স্টাইল করতে পারেন। <div> চালু করার জন্যও আপনি CSS ব্যবহার করতে পারেন। মনে রাখবেন, যদি আপনি স্ক্রলিং চালু না করেন এবং কন্টেন্টটি ইনফো উইন্ডোর উপলব্ধ স্থান অতিক্রম করে, তবে তা ইনফো উইন্ডোর বাইরে ছড়িয়ে পড়তে পারে।

সর্বোত্তম অনুশীলন: ব্যবহারকারীর সেরা অভিজ্ঞতার জন্য, ম্যাপে যেকোনো সময়ে শুধুমাত্র একটি ইনফো উইন্ডো খোলা থাকা উচিত। একাধিক ইনফো উইন্ডো ম্যাপটিকে অগোছালো দেখায়। যদি আপনার একবারে শুধুমাত্র একটি ইনফো উইন্ডোর প্রয়োজন হয়, তবে আপনি কেবল একটি InfoWindow অবজেক্ট তৈরি করতে পারেন এবং ব্যবহারকারীর ক্লিকের মতো ম্যাপ ইভেন্টের উপর ভিত্তি করে এটিকে বিভিন্ন স্থানে বা মার্কারে খুলতে পারেন। যদি আপনার একাধিক ইনফো উইন্ডোর প্রয়োজন হয়, তবে আপনি একই সময়ে একাধিক InfoWindow অবজেক্ট প্রদর্শন করতে পারেন।

একটি তথ্য উইন্ডো খুলুন

যখন আপনি একটি ইনফো উইন্ডো তৈরি করেন, তখন তা ম্যাপে স্বয়ংক্রিয়ভাবে প্রদর্শিত হয় না। ইনফো উইন্ডোটিকে দৃশ্যমান করতে, আপনাকে অবশ্যই InfoWindow এর open() মেথডটি কল করতে হবে এবং এর সাথে একটি InfoWindowOpenOptions অবজেক্ট লিটারেল পাস করতে হবে, যেখানে নিম্নলিখিত অপশনগুলো উল্লেখ থাকবে:

• map নির্দিষ্ট করে দেয় কোন মানচিত্র বা স্ট্রিট ভিউ প্যানোরামাটি খুলতে হবে।
• anchor মধ্যে একটি অ্যাঙ্কর পয়েন্ট থাকে (যেমন একটি Marker )। যদি anchor অপশনটি null বা আনডিফাইন্ড হয়, তাহলে ইনফো উইন্ডোটি এর position প্রপার্টিতে খুলবে।

টাইপস্ক্রিপ্ট

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

async function initMap(): Promise<void> {
  // Import the needed libraries.
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  // Get the map element and the inner map from it.
  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  // Get the center of the map.
  const center = mapElement.center;

  // Create the info window content.
  const heading = document.createElement("h1");
  heading.textContent = "Uluru (Ayers Rock)";

  const content = document.createElement("div");

  const infoParagraph = document.createElement("p");
  infoParagraph.textContent =
  `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 mi) by road. Kata Tjuta and Uluru are the two major features of the 
  Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and 
  Yankunytjatjara, the Aboriginal people of the area. It has many springs, 
  waterholes, rock caves and ancient paintings. Uluru is listed as a World 
  Heritage Site.`;

  content.appendChild(infoParagraph);

  const link = document.createElement("a");
  link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.target = "_blank";
  content.appendChild(link);

  // Create the info window.
  const infowindow = new google.maps.InfoWindow({
    headerContent: heading,
    content: content,
    ariaLabel: "Uluru",
    maxWidth: 500, // Set max width (optional).
  });

  // Create the marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: center,
    map: innerMap,
    title: "Uluru (Ayers Rock)",
    gmpClickable: true,
  });

  // Open the info window when the map loads.
  infowindow.open({
    anchor: marker,
    map: innerMap,
  });

  // Open the info window when the marker is clicked.
  marker.addEventListener("gmp-click", () => {
    infowindow.open({
      anchor: marker,
      map: innerMap,
    });
  });
}

initMap();
index.ts

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপস ব্যবহারের নির্দেশিকাটি পড়ুন।

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

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Get the center of the map.
    const center = mapElement.center;
    // Create the info window content.
    const heading = document.createElement("h1");
    heading.textContent = "Uluru (Ayers Rock)";
    const content = document.createElement("div");
    const infoParagraph = document.createElement("p");
    infoParagraph.textContent =
        `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 mi) by road. Kata Tjuta and Uluru are the two major features of the 
  Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and 
  Yankunytjatjara, the Aboriginal people of the area. It has many springs, 
  waterholes, rock caves and ancient paintings. Uluru is listed as a World 
  Heritage Site.`;
    content.appendChild(infoParagraph);
    const link = document.createElement("a");
    link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.target = "_blank";
    content.appendChild(link);
    // Create the info window.
    const infowindow = new google.maps.InfoWindow({
        headerContent: heading,
        content: content,
        ariaLabel: "Uluru",
        maxWidth: 500, // Set max width (optional).
    });
    // Create the marker.
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: "Uluru (Ayers Rock)",
        gmpClickable: true,
    });
    // Open the info window when the map loads.
    infowindow.open({
        anchor: marker,
        map: innerMap,
    });
    // Open the info window when the marker is clicked.
    marker.addEventListener("gmp-click", () => {
        infowindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}
initMap();
index.js

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net

নিম্নলিখিত উদাহরণটি একটি তথ্য উইন্ডোর maxWidth নির্ধারণ করে: উদাহরণটি দেখুন ।

একটি তথ্য উইন্ডোতে ফোকাস সেট করুন

একটি ইনফো উইন্ডোতে ফোকাস সেট করতে, এর focus() মেথডটি কল করুন। ফোকাস সেট করার আগে একটি visible ইভেন্টের সাথে এই মেথডটি ব্যবহার করার কথা বিবেচনা করুন। একটি অদৃশ্য ইনফো উইন্ডোতে এই মেথডটি কল করলে কোনো প্রভাব পড়বে না। একটি ইনফো উইন্ডোকে দৃশ্যমান করতে open() মেথডটি কল করুন।

একটি তথ্য উইন্ডো বন্ধ করুন

ডিফল্টরূপে, একটি তথ্য উইন্ডো ততক্ষণ খোলা থাকে যতক্ষণ না ব্যবহারকারী বন্ধ করার কন্ট্রোলে (তথ্য উইন্ডোর উপরের ডানদিকে থাকা একটি ক্রস চিহ্ন) ক্লিক করেন, অথবা ESC কী চাপেন। আপনি এর close() মেথড কল করেও তথ্য উইন্ডোটি স্পষ্টভাবে বন্ধ করতে পারেন।

যখন একটি ইনফো উইন্ডো বন্ধ করা হয়, তখন ফোকাস সেই এলিমেন্টে ফিরে যায় যেটি ইনফো উইন্ডোটি খোলার আগে ফোকাসে ছিল। যদি সেই এলিমেন্টটি অনুপলব্ধ থাকে, তবে ফোকাস ম্যাপে ফিরে যায়। এই আচরণটি পরিবর্তন করতে, আপনি closeclick ইভেন্টটি শুনতে পারেন এবং নিম্নলিখিত উদাহরণে দেখানো অনুযায়ী ম্যানুয়ালি ফোকাস পরিচালনা করতে পারেন:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

একটি তথ্য উইন্ডো সরান

তথ্য উইন্ডোর অবস্থান পরিবর্তন করার কয়েকটি উপায় আছে:

• তথ্য উইন্ডোতে setPosition() কল করুন, অথবা
• InfoWindow.open() মেথড ব্যবহার করে ইনফো উইন্ডোটিকে একটি নতুন মার্কারের সাথে সংযুক্ত করুন। দ্রষ্টব্য: যদি আপনি কোনো মার্কার পাস না করে open() কল করেন, তাহলে InfoWindow InfoWindowOptions অবজেক্ট লিটারেলের মাধ্যমে নির্মাণের সময় নির্দিষ্ট করা অবস্থানটি ব্যবহার করবে।

কাস্টমাইজেশন

InfoWindow ক্লাসে কাস্টমাইজেশনের সুযোগ নেই। এর পরিবর্তে, কীভাবে একটি সম্পূর্ণ কাস্টমাইজড পপআপ তৈরি করতে হয় তা দেখতে কাস্টমাইজড পপআপ উদাহরণটি দেখুন।