পপওভার

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();