পপোভারস

একটি 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 { AltitudeMode, Map3DElement, MapMode, 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: MapMode.HYBRID,
        gestureHandling: "COOPERATIVE"
    });
    const popover = new PopoverElement({
        altitudeMode: 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);
}
init();
index.js

একটি পপওভারকে একটি মার্কারে অ্যাঙ্কর করুন

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

async function init() {
    const { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, 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: MapMode.HYBRID,
        gestureHandling: "COOPERATIVE"
    });
    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: 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', (event) => {
        // 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);
}
init();
index.js

HTML ব্যবহার করে একটি পপওভারকে একটি মার্কারে অ্যাঙ্কর করুন

আপনি কোনও জাভাস্ক্রিপ্ট কোড না লিখেও মার্কারগুলিতে পপওভারগুলি অ্যাঙ্কর করতে পারেন, যেমনটি নীচে দেখানো হয়েছে:

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