Google मानचित्र - जानकारी विंडो

मार्कर, पॉलीगॉन, पॉलीइन्स और अन्य ज्यामितीय आकृतियों के अलावा, हम मानचित्र पर एक सूचना विंडो भी बना सकते हैं। यह अध्याय बताता है कि इंफो विंडो का उपयोग कैसे करें।

एक खिड़की जोड़ना

जानकारी विंडो का उपयोग मानचित्र में किसी भी प्रकार की जानकारी जोड़ने के लिए किया जाता है। उदाहरण के लिए, यदि आप मानचित्र पर किसी स्थान के बारे में जानकारी प्रदान करना चाहते हैं, तो आप एक सूचना विंडो का उपयोग कर सकते हैं। आमतौर पर जानकारी विंडो एक मार्कर से जुड़ी होती है। आप इन्स्टैंट करके एक सूचना विंडो संलग्न कर सकते हैंgoogle.maps.InfoWindowकक्षा। इसके निम्नलिखित गुण हैं -

Content - आप इस विकल्प का उपयोग करके अपनी सामग्री को स्ट्रिंग प्रारूप में पास कर सकते हैं।
position - आप इस विकल्प का उपयोग करके जानकारी विंडो की स्थिति चुन सकते हैं।
maxWidth- डिफ़ॉल्ट रूप से, जानकारी विंडो की चौड़ाई पाठ लपेटे जाने तक खींची जाएगी। MaxWidth को निर्दिष्ट करके, हम क्षैतिज रूप से जानकारी विंडो के आकार को प्रतिबंधित कर सकते हैं।

उदाहरण

निम्न उदाहरण दिखाता है कि मार्कर कैसे सेट करें और इसके ऊपर एक सूचना विंडो निर्दिष्ट करें -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

यह निम्नलिखित उत्पादन का उत्पादन करेगा -