পপোভারস

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

সাধারণত আপনি একটি ইন্টারেক্টিভ মার্কারের সাথে একটি পপওভার সংযুক্ত করবেন, তবে আপনি একটি নির্দিষ্ট LatLngAltitude স্থানাঙ্কের সাথে একটি পপওভার সংযুক্ত করতে পারেন, বা এটি একটি মার্কার থেকে অফসেট করতে পারেন৷

একটি পপওভার যোগ করুন

PopoverElement কনস্ট্রাক্টর একটি PopoverElementOptions অবজেক্ট আক্ষরিক নেয়, যা পপওভার প্রদর্শনের জন্য প্রাথমিক পরামিতিগুলি নির্দিষ্ট করে।

PopoverElementOptions অবজেক্ট আক্ষরিক নিম্নলিখিত ক্ষেত্র রয়েছে:

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

PopoverElement এর সামগ্রীতে পাঠ্যের একটি স্ট্রিং, HTML এর একটি স্নিপেট বা একটি DOM উপাদান থাকতে পারে। আপনি header বা default স্লটে স্পষ্টভাবে PopoverElement যোগ করে বিষয়বস্তু সেট করেন।

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

একটি 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,
    });
    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

একটি মার্কার একটি পপওভার নোঙ্গর

আপনি মার্কার থেকে popovers নোঙ্গর করতে পারেন. একটি মার্কারে অ্যাঙ্কর করা একটি পপওভার যোগ করার সময়, আপনি মার্কার ব্যবহার করার জন্য 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,
    });
    // 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();