পপোভারস

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

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

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

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

PopoverElementOptions অবজেক্ট লিটারেলটিতে নিম্নলিখিত ফিল্ডগুলো রয়েছে:

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

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

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

একটি পপওভারকে 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();