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

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript
  1. शुरुआती जानकारी
  2. जानकारी विंडो जोड़ना
  3. जानकारी विंडो खोलें
  4. जानकारी देने वाली विंडो बंद करें
  5. जानकारी विंडो को एक जगह से दूसरी जगह ले जाना

शुरुआती जानकारी

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

ऑस्ट्रेलिया की किसी जगह की जानकारी दिखाता हुआ InfoWindow.

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

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

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

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

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

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

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

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

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

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

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

TypeScript

// 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

JavaScript

// 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 क्लास में, पसंद के मुताबिक बनाने की सुविधा नहीं है. इसके बजाय, पूरी तरह से कस्टमाइज़ किया गया पॉप-अप बनाने का तरीका जानने के लिए, पसंद के मुताबिक पॉप-अप का उदाहरण देखें.