- शुरुआती जानकारी
- जानकारी वाली विंडो जोड़ना
- जानकारी वाली विंडो खोलना
- जानकारी विंडो बंद करना
- जानकारी विंडो को एक जगह से दूसरी जगह ले जाना
सुविधा के बारे में जानकारी
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 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.</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;
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 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.</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;
सैंपल आज़माएं
यहां दिए गए उदाहरण में, जानकारी वाली विंडो का maxWidth
सेट किया गया है:
उदाहरण देखें.
जानकारी विंडो पर फ़ोकस सेट करें
जानकारी वाली किसी विंडो पर फ़ोकस सेट करने के लिए, उसके focus()
तरीके को कॉल करें. फ़ोकस करने से पहले, visible
इवेंट के साथ इस तरीके का इस्तेमाल करें. इस तरीके का इस्तेमाल न करने वाली जानकारी
विंडो पर कॉल करने से कोई असर नहीं पड़ेगा. जानकारी देने वाली एक विंडो दिखाने के लिए
open()
को कॉल करें.
जानकारी वाली विंडो बंद करना
डिफ़ॉल्ट रूप से, जानकारी वाली विंडो तब तक खुली रहती है, जब तक उपयोगकर्ता
कंट्रोल पर क्लिक (जानकारी विंडो में सबसे ऊपर दाईं ओर) करता है या Esc बटन दबाता है.
जानकारी
विंडो को इसके close()
तरीके से कॉल करके, साफ़ तौर पर बंद भी किया जा सकता है.
जानकारी देने वाली विंडो बंद होने पर, फ़ोकस फिर से उस एलिमेंट पर चला जाता है जो जानकारी
वाली विंडो खुलने से पहले फ़ोकस में था. अगर वह एलिमेंट उपलब्ध नहीं है,
तो फ़ोकस को मैप पर वापस ले जाया जाता है. इस तरीके को बदलने के लिए, closeclick
इवेंट सुनें और यहां दिए गए उदाहरण में फ़ोकस को मैन्युअल तरीके से मैनेज करें:
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
जानकारी वाली विंडो को एक जगह से दूसरी जगह ले जाना
जानकारी विंडो की जगह बदलने के कई तरीके हैं:
- जानकारी विंडो में
setPosition()
पर कॉल करें या - जानकारी का तरीका,
InfoWindow.open()
तरीके का इस्तेमाल करके नए मार्कर से जोड़ें. ध्यान दें: अगर आप मार्कर पास किए बिनाopen()
को कॉल करते हैं, तोInfoWindow
,InfoWindowOptions
ऑब्जेक्ट लिटरल की मदद से कंस्ट्रक्शन के दौरान बताई गई जगह का इस्तेमाल करेगा.
पसंद के मुताबिक बनाएं
InfoWindow
कक्षा कस्टमाइज़ेशन की सुविधा नहीं देती है. इसके बजाय,
पूरी तरह से पसंद के मुताबिक पॉप-अप बनाने का तरीका जानने के लिए,
पसंद के मुताबिक बनाए गए पॉप-अप का उदाहरण
देखें.