पॉपओवर

popover, मैप पर किसी जगह के ऊपर एक डायलॉग विंडो में कॉन्टेंट (आम तौर पर टेक्स्ट या इमेज) दिखाता है. इस पॉपओवर में कॉन्टेंट एरिया और पतला स्टेम होता है. स्टेम का सिरा, मैप पर किसी जगह से जुड़ा होता है. पॉपओवर, स्क्रीन रीडर को डायलॉग के तौर पर दिखते हैं.

आम तौर पर, पॉपओवर को इंटरैक्टिव मार्कर से जोड़ा जाता है. हालांकि, पॉपओवर को किसी खास LatLngAltitude कोऑर्डिनेट से भी जोड़ा जा सकता है. इसके अलावा, इसे मार्कर से ऑफ़सेट भी किया जा सकता है.

पॉपओवर जोड़ना

PopoverElement कंस्ट्रक्टर, PopoverElementOptions ऑब्जेक्ट लिटरल लेता है. यह पॉपओवर को दिखाने के लिए शुरुआती पैरामीटर तय करता है.

PopoverElementOptions ऑब्जेक्ट लिटरल में ये फ़ील्ड शामिल होते हैं:

  • positionAnchor: मार्कर को दिखाने के लिए LatLngAltitude पोज़िशन. अगर मार्कर का इस्तेमाल किया जा रहा है, तो मार्कर की पोज़िशन का इस्तेमाल किया जाएगा.
  • altitudeMode: पॉपओवर की ऊंचाई को कैसे समझा जाता है.
  • lightDismissDisabled: इससे यह तय होता है कि जब उपयोगकर्ता पॉपओवर के बाहर क्लिक करता है या Esc कुंजी दबाता है, तब पॉपओवर खुला रहता है या नहीं. इस विकल्प को true पर सेट करने पर, मैप पर एक साथ कई lightDismissDisabled पॉपओवर दिखाए जा सकते हैं.
  • open: इससे तय होता है कि पॉपओवर खुला होना चाहिए या नहीं. डिफ़ॉल्ट रूप से, यह false पर सेट होती है.

PopoverElement के कॉन्टेंट में टेक्स्ट की स्ट्रिंग, एचटीएमएल का स्निपेट या DOM एलिमेंट शामिल हो सकता है. header या default स्लॉट में PopoverElement को साफ़ तौर पर जोड़कर, कॉन्टेंट सेट किया जाता है.

अगर आपको कॉन्टेंट का साइज़ तय करना है, तो उसे <div> एलिमेंट में रखें. इसके बाद, सीएसएस की मदद से <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,
    });
    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,
    });
    // 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

एचटीएमएल का इस्तेमाल करके, पॉपओवर को मार्कर से ऐंकर करना

बिना 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();