পপওভার

popover ম্যাপের উপরে একটি ডায়ালগ উইন্ডোতে, নির্দিষ্ট লোকেশনে কন্টেন্ট (সাধারণত টেক্সট বা ছবি) দেখায়। পপওভারে একটি কন্টেন্ট এরিয়া এবং একটি টেপার্ড স্টেম থাকে। স্টেমের শেষ প্রান্তটি ম্যাপের নির্দিষ্ট লোকেশনে অ্যাটাচ করা থাকে। স্ক্রিন রিডারে পপওভার ডায়ালগ হিসেবে দেখা যায়।

সাধারণত, আপনি ইন্টার‍্যাক্টিভ মার্কারে পপওভার অ্যাটাচ করবেন, কিন্তু আপনি নির্দিষ্ট LatLngAltitude কোঅর্ডিনেটেও পপওভার অ্যাটাচ করতে পারেন অথবা মার্কার থেকে অফসেট করতে পারেন।

পপওভার যোগ করা

PopoverElement কনস্ট্রাক্টর একটি PopoverElementOptions অবজেক্ট লিটারাল নেয়, যা পপওভার দেখানোর জন্য প্রাথমিক প্যারামিটার নির্দিষ্ট করে।

PopoverElementOptions অবজেক্ট লিটারাল-এ নিম্নলিখিত ফিল্ডগুলি থাকে:

• positionAnchor: LatLngAltitude পজিশন যেখানে মার্কার দেখানো হবে। মার্কার ব্যবহার করা হলে, সেটির পজিশন ব্যবহার করা হবে।
• altitudeMode: পপওভারের উচ্চতা কীভাবে ব্যাখ্যা করা হয়।
• lightDismissDisabled: ব্যবহারকারী পপওভারের বাইরে ক্লিক করলে বা Esc কী প্রেস করলে পপওভার খোলা থাকবে কিনা। এই বিকল্পটি true হিসেবে সেট করা থাকলে, একসাথে ম্যাপে একাধিক lightDismissDisabled পপ-ওভার দেখানো যেতে পারে।
• open: পপ-ওভার খোলা থাকবে কিনা তা নির্ধারণ করে। ডিফল্ট হিসেবে false সেট করা থাকে।

PopoverElement-এর কন্টেন্টে টেক্সটের স্ট্রিং, HTML-এর স্নিপেট বা DOM এলিমেন্ট থাকতে পারে। আপনি header বা default স্লটে স্পষ্টভাবে PopoverElement-এর সাথে যোগ করে কন্টেন্ট সেট করেছেন।

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

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

আপনার যদি একাধিক পপওভারের প্রয়োজন হয়, তাহলে lightDismissDisabled-কে true-এ সেট করে একই সময়ে একাধিক PopoverElement অবজেক্ট দেখাতে পারবেন।

LatLngAltitude কোঅর্ডিনেটে পপওভার অ্যাঙ্কর করা

আপনি কোনও পপওভার তৈরি করলে, সেটি ম্যাপে অটোমেটিক দেখানো হয় না। পপওভারকে দৃশ্যমান করতে, আপনাকে অবশ্যই PopoverElement-এ open বিকল্পটি true হিসেবে সেট করতে হবে। আপনি কনস্ট্রাকশন বা ইনস্ট্যানসিয়েশনের পরে এই অ্যাকশন পারফর্ম করতে পারবেন।

async function init() {
    const { Map3DElement, PopoverElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 },
        range: 4000,
        tilt: 74,
        heading: 38,
        mode: 'HYBRID',
    });

    const popover = new PopoverElement({
        altitudeMode: 'ABSOLUTE',
        open: true,
        positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 },
    });

    popover.append('Golden Gate Bridge');

    map.append(popover);

    document.body.append(map);
}

void init();
index.js

মার্কারে পপওভার অ্যাঙ্কর করা

আপনি মার্কারের সাথে পপ-ওভার অ্যাঙ্কর করতে পারবেন। মার্কারের সাথে অ্যাঙ্কর করা পপওভার যোগ করার সময়, মার্কার ব্যবহার করার জন্য আপনি PopoverElement.positionAnchor বিকল্প সেট করেন।

async function init() {
    const { Map3DElement, Marker3DInteractiveElement, PopoverElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 },
        range: 4000,
        tilt: 74,
        heading: 38,
        mode: 'HYBRID',
    });

    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: 'ABSOLUTE',
        position: { lat: 37.819852, lng: -122.478549, altitude: 100 },
    });

    const popover = new PopoverElement({
        open: false,
        positionAnchor: interactiveMarker,
    });

    popover.append('Golden Gate Bridge');

    interactiveMarker.addEventListener('gmp-click', () => {
        // toggle the marker to the other state (unlee you are clicking on the marker itself when it reopens it)
        popover.open = !popover.open;
    });

    map.append(interactiveMarker);
    map.append(popover);

    document.body.append(map);
}

void init();
index.js

HTML ব্যবহার করে কোনও মার্কারের সাথে পপওভার অ্যাঙ্কর করা

এছাড়াও, আপনি কোনও JavaScript কোড না লিখেও মার্কারের সাথে পপওভার অ্যাঙ্কর করতে পারেন, যেমন নিচে দেখানো হয়েছে:

<gmp-map-3d mode="hybrid" center="37.819852,-122.478549" tilt="75" range="2000" heading="330">
  <gmp-marker-3d-interactive gmp-popover-target="my-popover" position="37.819852,-122.478549,100"></gmp-marker-3d-interactive>
  <gmp-popover id="my-popover">
    Golden Gate Bridge
  </gmp-popover>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGl0teQ6qwaBEdHazOWIEXd8XGWOZvoaM&v=beta&libraries=maps3d">
</script>

পপওভারে কাস্টম কন্টেন্ট যোগ করা

header এবং content বিকল্প সেট করে আপনি পপওভারে কাস্টম কন্টেন্ট যোগ করতে পারবেন:

async function init() {
  const {Map3DElement, MapMode, PopoverElement, AltitudeMode} = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
    tilt: 75,
    heading: 330,
    mode: MapMode.SATELLITE,
  });

  const popover = new PopoverElement({
    altitudeMode: AltitudeMode.ABSOLUTE,
    open: true,
    positionAnchor: {lat: 37.819852, lng: -122.478549, altitude: 100},
  });

  const header = document.createElement('div');
  header.style.fontWeight = 'bold';
  header.slot = 'header';
  header.textContent = 'Golden Gate Bridge';
  const content = document.createElement('div');
  content.textContent = 'Iconic orange bridge connecting San Francisco to Marin.';

  popover.append(header);
  popover.append(content);

  document.body.append(map);
  map.append(popover);
}

init();