जानकारी वाली विंडो

परिचय

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

आम तौर पर, जानकारी वाली विंडो को मार्कर से अटैच किया जाता है. हालांकि, जानकारी वाली विंडो को किसी खास अक्षांश/देशांतर से भी अटैच किया जा सकता है. इसके बारे में, जानकारी वाली विंडो जोड़ने के सेक्शन में यहां बताया गया है.

मोटे तौर पर, जानकारी वाली विंडो एक तरह का ओवरले होती हैं. अन्य तरह के ओवरले के बारे में जानने के लिए, मैप पर ड्राइंग बनाना लेख पढ़ें.

जानकारी वाली विंडो जोड़ना

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

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

• content में, जानकारी वाली विंडो में दिखाने के लिए टेक्स्ट की स्ट्रिंग या DOM नोड होता है.
• pixelOffset में, जानकारी वाली विंडो के ऊपरी हिस्से से लेकर उस जगह तक का ऑफ़सेट होता है जहां जानकारी वाली विंडो को ऐंकर किया गया है. आम तौर पर, आपको इस फ़ील्ड की वैल्यू तय करने की ज़रूरत नहीं होती. इसे डिफ़ॉल्ट वैल्यू पर छोड़ा जा सकता है.
• position में वह LatLng होता है जिस पर यह जानकारी वाली विंडो ऐंकर की जाती है. ध्यान दें: InfoWindow को Marker ऑब्जेक्ट से अटैच किया जा सकता है. इस मामले में, इसकी पोज़िशन मार्कर की जगह के हिसाब से तय होती है. इसके अलावा, इसे मैप पर किसी तय की गई LatLng पर भी अटैच किया जा सकता है. LatLng को वापस पाने का एक तरीका, जियोकोडिंग सेवा का इस्तेमाल करना है. मार्कर पर जानकारी वाला विंडो खोलने से, position अपने-आप अपडेट हो जाएगा.
• maxWidth पिक्सल में जानकारी वाली विंडो की ज़्यादा से ज़्यादा चौड़ाई तय करता है. डिफ़ॉल्ट रूप से, जानकारी वाली विंडो का साइज़ उसके कॉन्टेंट के हिसाब से होता है. अगर जानकारी वाली विंडो पूरे मैप पर दिखती है, तो टेक्स्ट अपने-आप रैप हो जाता है. अगर आपने maxWidth जोड़ा है, तो जानकारी वाली विंडो में टेक्स्ट अपने-आप रैप हो जाएगा, ताकि तय की गई चौड़ाई लागू हो सके. अगर यह ज़्यादा से ज़्यादा चौड़ाई तक पहुंच जाती है और स्क्रीन पर वर्टिकल जगह होती है, तो जानकारी वाली विंडो वर्टिकल तौर पर बड़ी हो सकती है.

InfoWindow के कॉन्टेंट में टेक्स्ट की स्ट्रिंग, एचटीएमएल का स्निपेट या DOM एलिमेंट शामिल हो सकता है. कॉन्टेंट सेट करने के लिए, इसे InfoWindowOptions में शामिल करें या InfoWindow पर setContent() को साफ़ तौर पर कॉल करें.

अगर आपको कॉन्टेंट का साइज़ साफ़ तौर पर तय करना है, तो उसे <div> एलिमेंट में रखें. इसके बाद, सीएसएस की मदद से <div> को स्टाइल करें. स्क्रोलिंग की सुविधा चालू करने के लिए, सीएसएस का इस्तेमाल भी किया जा सकता है. ध्यान दें कि अगर आपने स्क्रोल करने की सुविधा चालू नहीं की है और कॉन्टेंट, जानकारी वाली विंडो में उपलब्ध जगह से ज़्यादा है, तो हो सकता है कि कॉन्टेंट, जानकारी वाली विंडो से बाहर चला जाए.

जानकारी वाली विंडो खोलना

ज़्यादा जानकारी वाली विंडो बनाने पर, वह मैप पर अपने-आप नहीं दिखती. जानकारी वाली विंडो को दिखाने के लिए, आपको open() पर open() तरीके को कॉल करना होगा. इसके लिए, आपको InfoWindowOpenOptions ऑब्जेक्ट लिटरल पास करना होगा. इसमें ये विकल्प शामिल होने चाहिए:InfoWindow

• map से उस मैप या Street View पैनोरामा के बारे में पता चलता है जिसे खोलना है.
• anchor में ऐंकर पॉइंट (उदाहरण के लिए, Marker) शामिल है. अगर anchor विकल्प null या तय नहीं किया गया है, तो जानकारी विंडो, position प्रॉपर्टी पर खुलेगी.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

async function initMap(): Promise<void> {
  // Import the needed libraries.
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  // Get the map element and the inner map from it.
  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  // Get the center of the map.
  const center = mapElement.center;

  // Create the info window content.
  const heading = document.createElement("h1");
  heading.textContent = "Uluru (Ayers Rock)";

  const content = document.createElement("div");

  const infoParagraph = document.createElement("p");
  infoParagraph.textContent =
  `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 mi) by road. Kata Tjuta and Uluru are the two major features of the 
  Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and 
  Yankunytjatjara, the Aboriginal people of the area. It has many springs, 
  waterholes, rock caves and ancient paintings. Uluru is listed as a World 
  Heritage Site.`;

  content.appendChild(infoParagraph);

  const link = document.createElement("a");
  link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.target = "_blank";
  content.appendChild(link);

  // Create the info window.
  const infowindow = new google.maps.InfoWindow({
    headerContent: heading,
    content: content,
    ariaLabel: "Uluru",
    maxWidth: 500, // Set max width (optional).
  });

  // Create the marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: center,
    map: innerMap,
    title: "Uluru (Ayers Rock)",
    gmpClickable: true,
  });

  // Open the info window when the map loads.
  infowindow.open({
    anchor: marker,
    map: innerMap,
  });

  // Open the info window when the marker is clicked.
  marker.addEventListener("gmp-click", () => {
    infowindow.open({
      anchor: marker,
      map: innerMap,
    });
  });
}

initMap();
index.ts

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Get the center of the map.
    const center = mapElement.center;
    // Create the info window content.
    const heading = document.createElement("h1");
    heading.textContent = "Uluru (Ayers Rock)";
    const content = document.createElement("div");
    const infoParagraph = document.createElement("p");
    infoParagraph.textContent =
        `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 mi) by road. Kata Tjuta and Uluru are the two major features of the 
  Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and 
  Yankunytjatjara, the Aboriginal people of the area. It has many springs, 
  waterholes, rock caves and ancient paintings. Uluru is listed as a World 
  Heritage Site.`;
    content.appendChild(infoParagraph);
    const link = document.createElement("a");
    link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.target = "_blank";
    content.appendChild(link);
    // Create the info window.
    const infowindow = new google.maps.InfoWindow({
        headerContent: heading,
        content: content,
        ariaLabel: "Uluru",
        maxWidth: 500, // Set max width (optional).
    });
    // Create the marker.
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: "Uluru (Ayers Rock)",
        gmpClickable: true,
    });
    // Open the info window when the map loads.
    infowindow.open({
        anchor: marker,
        map: innerMap,
    });
    // Open the info window when the marker is clicked.
    marker.addEventListener("gmp-click", () => {
        infowindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}
initMap();
index.js

यहां दिए गए उदाहरण में, जानकारी वाली विंडो का maxWidth सेट किया गया है: उदाहरण देखें.

जानकारी वाली विंडो पर फ़ोकस सेट करना

किसी जानकारी वाली विंडो पर फ़ोकस सेट करने के लिए, उसके focus() तरीके को कॉल करें. फ़ोकस सेट करने से पहले, इस तरीके के साथ-साथ visible इवेंट का इस्तेमाल करें. अगर जानकारी वाली विंडो नहीं दिख रही है, तो इस तरीके को कॉल करने से कोई असर नहीं पड़ेगा. सूचना विंडो दिखाने के लिए, open() को कॉल करें.

जानकारी वाली विंडो बंद करना

डिफ़ॉल्ट रूप से, जानकारी वाली विंडो तब तक खुली रहती है, जब तक उपयोगकर्ता बंद करें कंट्रोल (जानकारी वाली विंडो के सबसे ऊपर दाईं ओर मौजूद क्रॉस का निशान) पर क्लिक नहीं करता या ESC बटन नहीं दबाता. close() तरीके को कॉल करके, जानकारी वाली विंडो को भी बंद किया जा सकता है.

सूचना विंडो बंद होने पर, फ़ोकस उस एलिमेंट पर वापस चला जाता है जिस पर सूचना विंडो खुलने से पहले फ़ोकस किया गया था. अगर वह एलिमेंट उपलब्ध नहीं है, तो फ़ोकस को वापस मैप पर ले जाया जाता है. इस डिफ़ॉल्ट व्यवहार को बदलने के लिए, closeclick इवेंट को सुना जा सकता है. साथ ही, फ़ोकस को मैन्युअल तरीके से मैनेज किया जा सकता है. इसके लिए, यहां दिया गया उदाहरण देखें:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

जानकारी वाली विंडो को मूव करना

जानकारी वाली विंडो की जगह बदलने के दो तरीके हैं:

• जानकारी विंडो में मौजूद setPosition() पर कॉल करें या
• InfoWindow.open() तरीके का इस्तेमाल करके, जानकारी वाली विंडो को नए मार्कर से अटैच करें. ध्यान दें: अगर मार्कर पास किए बिना open() को कॉल किया जाता है, तो InfoWindow उस जगह का इस्तेमाल करेगा जिसे InfoWindowOptions ऑब्जेक्ट लिटरल के ज़रिए कंस्ट्रक्शन के दौरान तय किया गया था.

कस्टमाइज़ेशन

InfoWindow क्लास में, प्रॉडक्ट को पसंद के मुताबिक बनाने की सुविधा उपलब्ध नहीं है. इसके बजाय, पूरी तरह से मनमुताबिक बनाया गया पॉप-अप बनाने का तरीका जानने के लिए, मनमुताबिक बनाए गए पॉप-अप का उदाहरण देखें.