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

1. शुरुआती जानकारी
2. जानकारी विंडो जोड़ना
3. जानकारी विंडो खोलें
4. जानकारी विंडो बंद करना
5. जानकारी विंडो को एक जगह से दूसरी जगह ले जाना

परिचय

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

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

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

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

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

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

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

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

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

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

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

• 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.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

window.initMap = initMap;
index.js

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

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

जानकारी विंडो पर फ़ोकस सेट करने के लिए, इसके focus() पर कॉल करें तरीका. visible के साथ इस तरीके का इस्तेमाल करें इवेंट सेट अप करें. दिखाई न देने वाली जानकारी के आधार पर इस तरीके से कॉल करना विंडो से कोई असर नहीं पड़ेगा. open() को यहां कॉल करें एक जानकारी विंडो को दृश्यमान बनाएं.

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

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

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

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

जानकारी विंडो को एक से दूसरी जगह पर ले जाना

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

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

पसंद के मुताबिक बनाएं

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