इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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

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

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

ऑस्ट्रेलिया में किसी जगह के बारे में जानकारी दिखाने वाली जानकारी विंडो.

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

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

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

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

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

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

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

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

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

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

जानकारी वाली कोई विंडो बनाने पर, वह मैप पर अपने-आप नहीं दिखती. जानकारी वाली विंडो दिखाने के लिए, आपको 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

उदाहरण देखें

सैंपल आज़माएं

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

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

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

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

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

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

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

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

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

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

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

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