তথ্যের উইন্ডো

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

ভূমিকা

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-এ open() মেথড কল করতে হবে, এর সাথে নিম্নলিখিত বিকল্প নির্দিষ্ট করে একটি InfoWindowOpenOptions অবজেক্ট লিটেরাল পাস করতে হবে:

  • map কোন ম্যাপ বা Street View প্যানোরামা খুলতে হবে তা নির্দিষ্ট করে।
  • anchor-এ একটি অ্যাঙ্কর পয়েন্ট (যেমন, Marker) আছে। anchor বিকল্পটি null বা অনির্দিষ্ট হলে, তথ্য উইন্ডোটি এর position প্রপার্টিতে খুলবে।

TypeScript

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

async function init(): Promise<void> {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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 InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new 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,
        });
    });
}

void init();

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

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

async function init() {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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 InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new 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,
        });
    });
}

void init();
উদাহরণ দেখুন

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

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

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

তথ্য উইন্ডো বন্ধ করা

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

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

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

তথ্য উইন্ডো সরানো

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

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