Google मानचित्र - UI नियंत्रण

उपयोगकर्ता द्वारा इंटरेक्ट करने के लिए Google मानचित्र विभिन्न नियंत्रणों के साथ एक उपयोगकर्ता इंटरफ़ेस प्रदान करता है। हम इन नियंत्रणों को जोड़, अनुकूलित और अक्षम कर सकते हैं।

डिफ़ॉल्ट नियंत्रण

Google नक्शे द्वारा दिए गए डिफ़ॉल्ट नियंत्रणों की एक सूची इस प्रकार है -

Zoom- नक्शे के ज़ूम स्तर को बढ़ाने और घटाने के लिए, हमारे पास डिफ़ॉल्ट रूप से + और - बटन के साथ एक स्लाइडर होगा। यह स्लाइडर मैप के बाएं हाथ के कोने पर स्थित होगा।
Pan - जूम स्लाइडर के ठीक ऊपर, मैप को पैन करने के लिए पैन कंट्रोल होगा।
Map Type- आप नक्शे के शीर्ष दाएं कोने में इस नियंत्रण का पता लगा सकते हैं। यह सैटेलाइट, रोडमैप और टेरेन जैसे मानचित्र प्रकार के विकल्प प्रदान करता है। उपयोगकर्ता इनमें से कोई भी मानचित्र चुन सकते हैं।
Street view- पैन आइकन और ज़ूम स्लाइडर के बीच, हमारे पास एक पैगमैन आइकन है। उपयोगकर्ता इस आइकन को खींच सकते हैं और किसी विशेष स्थान पर इसका सड़क दृश्य प्राप्त कर सकते हैं।

उदाहरण

यहां एक उदाहरण है जहां आप Google मानचित्र द्वारा प्रदान किए गए डिफ़ॉल्ट UI नियंत्रणों का निरीक्षण कर सकते हैं -

UI डिफ़ॉल्ट नियंत्रणों को अक्षम करना

हम Google मानचित्र द्वारा उपलब्ध कराए गए डिफ़ॉल्ट UI नियंत्रणों को केवल बनाकर अक्षम कर सकते हैं disableDefaultUI मानचित्र विकल्पों में सही मूल्य।

उदाहरण

निम्न उदाहरण दिखाता है कि Google मैप्स द्वारा प्रदान किए गए डिफ़ॉल्ट UI नियंत्रणों को कैसे अक्षम किया जाए।

<!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.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

सभी नियंत्रणों को सक्षम / अक्षम करना

इन डिफ़ॉल्ट नियंत्रणों के अलावा, Google मानचित्र नीचे सूचीबद्ध तीन और नियंत्रण भी प्रदान करता है।

Scale- स्केल कंट्रोल मैप स्केल एलिमेंट को प्रदर्शित करता है। यह नियंत्रण डिफ़ॉल्ट रूप से सक्षम नहीं है।
Rotate- रोटेट कंट्रोल में एक छोटा गोलाकार आइकन होता है जो आपको तिरछी इमेजरी वाले नक्शे को घुमाने की अनुमति देता है। यह नियंत्रण मानचित्र के ऊपरी बाएँ कोने पर डिफ़ॉल्ट रूप से दिखाई देता है। (अधिक जानकारी के लिए 45 ° इमेजरी देखें।)
Overview- नक्शे के ज़ूम स्तर को बढ़ाने और घटाने के लिए, हमारे पास डिफ़ॉल्ट रूप से + और - बटन के साथ एक स्लाइडर है। यह स्लाइडर मैप के बाएं कोने पर स्थित है।

मानचित्र विकल्पों में, हम नीचे दिखाए गए अनुसार Google मानचित्र द्वारा दिए गए किसी भी नियंत्रण को सक्षम और अक्षम कर सकते हैं -

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

उदाहरण

निम्न कोड दिखाता है कि सभी नियंत्रण कैसे सक्षम करें -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

नियंत्रण विकल्प

हम इसके नियंत्रण विकल्पों का उपयोग करके Google मानचित्र नियंत्रण की उपस्थिति बदल सकते हैं। उदाहरण के लिए, ज़ूम नियंत्रण को आकार में कम या बड़ा किया जा सकता है। MapType नियंत्रण उपस्थिति क्षैतिज पट्टी या ड्रॉप-डाउन मेनू में भिन्न हो सकती है। नीचे जूम और मैप टाइप नियंत्रणों के लिए नियंत्रण विकल्पों की सूची दी गई है।

अनु क्रमांक।	नियंत्रण नाम	नियंत्रण विकल्प
1	ज़ूम नियंत्रण	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	MapType नियंत्रण	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

उदाहरण

निम्न उदाहरण दर्शाता है कि नियंत्रण विकल्पों का उपयोग कैसे करें -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

स्थिति नियंत्रण

आप नियंत्रण विकल्पों में निम्न पंक्ति जोड़कर नियंत्रण की स्थिति को बदल सकते हैं।

position:google.maps.ControlPosition.Desired_Position,

यहां उपलब्ध पदों की सूची दी गई है जहां एक नियंत्रण को मानचित्र पर रखा जा सकता है -

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

उदाहरण

निम्न उदाहरण से पता चलता है कि मैप के शीर्ष केंद्र में मैप टाइपिड नियंत्रण को कैसे रखा जाए और मैप के निचले केंद्र में ज़ूम नियंत्रण कैसे रखा जाए।

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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