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

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

सुविधा के बारे में जानकारी

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

ऑस्ट्रेलिया के किसी स्थान के बारे में जानकारी दिखाने वाली इन्फ़ोविंडो.

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

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

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

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

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

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

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

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

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

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

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