नियंत्रण

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

कंट्रोल के बारे में खास जानकारी

Maps JavaScript API की मदद से दिखाए जाने वाले मैप में, यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं. इनकी मदद से, उपयोगकर्ता मैप के साथ इंटरैक्ट कर सकता है. इन एलिमेंट को कंट्रोल कहा जाता है. अपने ऐप्लिकेशन में, इन कंट्रोल के अलग-अलग वर्शन शामिल किए जा सकते हैं. इसके अलावा, आपके पास कुछ न करने का विकल्प भी है. ऐसे में, Maps JavaScript API सभी कंट्रोल के व्यवहार को मैनेज करेगा.

नीचे दिए गए मैप में, Maps JavaScript API से दिखाए जाने वाले कंट्रोल का डिफ़ॉल्ट सेट दिखाया गया है:

सबसे ऊपर बाईं ओर से घड़ी की सुई की दिशा में: मैप टाइप, फ़ुलस्क्रीन, कैमरा, Street View, कीबोर्ड शॉर्टकट.

यहां उन सभी कंट्रोल की सूची दी गई है जिनका इस्तेमाल अपने मैप में किया जा सकता है:

• मैप टाइप कंट्रोल, ड्रॉप-डाउन या हॉरिज़ॉन्टल बटन बार स्टाइल में उपलब्ध होता है. इससे उपयोगकर्ता को मैप टाइप (ROADMAP, SATELLITE, HYBRID या TERRAIN) चुनने की सुविधा मिलती है. यह कंट्रोल, डिफ़ॉल्ट रूप से मैप के सबसे ऊपर बाएं कोने में दिखता है.
• फ़ुलस्क्रीन कंट्रोल की मदद से, मैप को फ़ुलस्क्रीन मोड में खोला जा सकता है. यह कंट्रोल, डेस्कटॉप और मोबाइल डिवाइसों पर डिफ़ॉल्ट रूप से चालू होता है. ध्यान दें: iOS पर फ़ुलस्क्रीन की सुविधा काम नहीं करती. इसलिए, iOS डिवाइसों पर फ़ुलस्क्रीन कंट्रोल नहीं दिखता.
• कैमरा कंट्रोल में, ज़ूम और पैन, दोनों कंट्रोल होते हैं.
• Street View कंट्रोल में पेगमैन आइकॉन होता है. Street View की सुविधा चालू करने के लिए, इसे मैप पर खींचें और छोड़ें. यह कंट्रोल, डिफ़ॉल्ट रूप से मैप के सबसे नीचे दाईं ओर दिखता है.
• घुमाने का कंट्रोल, 3D इमेजरी वाले मैप के लिए, झुकाने और घुमाने के विकल्पों का कॉम्बिनेशन उपलब्ध कराता है. यह कंट्रोल, डिफ़ॉल्ट रूप से मैप के सबसे नीचे दाईं ओर दिखता है. ज़्यादा जानकारी के लिए, 3D की खास जानकारी देखें.
• स्केल कंट्रोल, मैप स्केल एलिमेंट दिखाता है. यह कंट्रोल डिफ़ॉल्ट रूप से बंद रहता है.
• कीबोर्ड शॉर्टकट कंट्रोल, मैप के साथ इंटरैक्ट करने के लिए कीबोर्ड शॉर्टकट की सूची दिखाता है.

आपके पास मैप के इन कंट्रोल को सीधे तौर पर ऐक्सेस करने या उनमें बदलाव करने का विकल्प नहीं होता. इसके बजाय, मैप के MapOptions फ़ील्ड में बदलाव किया जाता है. इससे कंट्रोल के दिखने और प्रज़ेंटेशन पर असर पड़ता है. मैप को इंस्टैंशिएट करते समय, कंट्रोल प्रज़ेंटेशन को अडजस्ट किया जा सकता है. इसके लिए, सही MapOptions का इस्तेमाल करें. इसके अलावा, मैप के विकल्पों को बदलने के लिए, setOptions() को कॉल करके मैप में डाइनैमिक तौर पर बदलाव किया जा सकता है.

ये सभी कंट्रोल, डिफ़ॉल्ट रूप से चालू नहीं होते. डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) के काम करने के तरीके और उसमें बदलाव करने के तरीके के बारे में जानने के लिए, नीचे दिया गया डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) सेक्शन देखें.

डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई)

डिफ़ॉल्ट रूप से, अगर मैप बहुत छोटा (200x200 पिक्सल) है, तो सभी कंट्रोल गायब हो जाते हैं. कंट्रोल को साफ़ तौर पर दिखने के लिए सेट करके, इस व्यवहार को बदला जा सकता है. मैप में कंट्रोल जोड़ना देखें.

फ़ुलस्क्रीन कंट्रोल को छोड़कर, मोबाइल और कंप्यूटर डिवाइसों पर कंट्रोल का व्यवहार और लुक एक जैसा होता है. फ़ुलस्क्रीन कंट्रोल के व्यवहार के बारे में जानने के लिए, कंट्रोल की सूची देखें.

इसके अलावा, सभी डिवाइसों पर कीबोर्ड हैंडलिंग की सुविधा डिफ़ॉल्ट रूप से चालू होती है.

डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) को बंद करना

ऐसा हो सकता है कि आपको एपीआई के डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) बटन पूरी तरह से बंद करने हों. इसके लिए, मैप की disableDefaultUI प्रॉपर्टी (MapOptions ऑब्जेक्ट में) को true पर सेट करें. यह प्रॉपर्टी, Maps JavaScript API के किसी भी यूज़र इंटरफ़ेस (यूआई) कंट्रोल बटन को बंद कर देती है. हालांकि, इससे बुनियादी मैप पर माउस जेस्चर या कीबोर्ड शॉर्टकट पर कोई असर नहीं पड़ता. इन्हें क्रमशः gestureHandling और keyboardShortcuts प्रॉपर्टी से कंट्रोल किया जाता है.

नीचे दिया गया कोड, यूज़र इंटरफ़ेस (यूआई) के बटन बंद कर देता है:

TypeScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js

उदाहरण देखें

मैप में कंट्रोल जोड़ना

ऐसा हो सकता है कि आपको यूज़र इंटरफ़ेस (यूआई) के व्यवहार या कंट्रोल को हटाकर, जोड़कर या उनमें बदलाव करके, अपने इंटरफ़ेस को पसंद के मुताबिक बनाना हो. साथ ही, यह पक्का करना हो कि आने वाले समय में होने वाले अपडेट से इस व्यवहार में कोई बदलाव न हो. अगर आपको सिर्फ़ मौजूदा व्यवहार को जोड़ना या उसमें बदलाव करना है, तो आपको यह पक्का करना होगा कि कंट्रोल को आपके ऐप्लिकेशन में साफ़ तौर पर जोड़ा गया हो.

मैप पर कुछ कंट्रोल डिफ़ॉल्ट रूप से दिखते हैं. वहीं, कुछ कंट्रोल तब तक नहीं दिखते, जब तक उनके लिए खास तौर पर अनुरोध न किया जाए. मैप में कंट्रोल जोड़ने या हटाने के बारे में, यहां दिए गए MapOptions ऑब्जेक्ट के फ़ील्ड में बताया गया है. इन्हें दिखाने के लिए, true पर सेट करें या छिपाने के लिए, false पर सेट करें:

{
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

डिफ़ॉल्ट रूप से, अगर मैप का साइज़ 200x200 पिक्सल से छोटा है, तो सभी कंट्रोल गायब हो जाते हैं. कंट्रोल को साफ़ तौर पर दिखने के लिए सेट करके, इस व्यवहार को बदला जा सकता है. उदाहरण के लिए, यहां दी गई टेबल में बताया गया है कि मैप के साइज़ और cameraControl फ़ील्ड की सेटिंग के आधार पर, कैमरा कंट्रोल दिखता है या नहीं:

मैप आकार	cameraControl	क्या यह दिख रहा है?
कोई भी	false	नहीं
कोई भी	true	हां
>= 200x200 पिक्सल	undefined	हां
< 200x200 पिक्सल	undefined	नहीं

इस उदाहरण में, मैप को कैमरा कंट्रोल छिपाने और स्केल कंट्रोल दिखाने के लिए सेट किया गया है. ध्यान दें कि हम डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) को साफ़ तौर पर बंद नहीं करते हैं. इसलिए, ये बदलाव डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) के व्यवहार में जोड़े जाते हैं.

TypeScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js

उदाहरण देखें

कंट्रोल के विकल्प

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

मैप बनाते समय, MapOptions ऑब्जेक्ट में कंट्रोल के सही विकल्प फ़ील्ड में बदलाव करके, इन कंट्रोल में बदलाव किया जाता है.

उदाहरण के लिए, मैप टाइप कंट्रोल में बदलाव करने के विकल्प, mapTypeControlOptions फ़ील्ड में दिखाए जाते हैं. मैप टाइप कंट्रोल, इनमें से किसी एक style विकल्प में दिख सकता है:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR, कंट्रोल के कलेक्शन को हॉरिज़ॉन्टल बार में बटन के तौर पर दिखाता है, जैसा कि Google Maps पर दिखाया जाता है.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU, एक बटन वाला कंट्रोल दिखाता है. इसकी मदद से, ड्रॉप-डाउन मेन्यू का इस्तेमाल करके मैप का टाइप चुना जा सकता है.
• google.maps.MapTypeControlStyle.DEFAULT, डिफ़ॉल्ट ऐक्शन और सेटिंग दिखाता है. यह स्क्रीन के साइज़ पर निर्भर करता है. साथ ही, एपीआई के आने वाले वर्शन में इसमें बदलाव हो सकता है.

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

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

नीचे दिए गए उदाहरण में, कंट्रोल की डिफ़ॉल्ट पोज़िशन और स्टाइल को बदलने का तरीका बताया गया है.

TypeScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});
index.js

उदाहरण देखें

आम तौर पर, मैप बनाते समय कंट्रोल कॉन्फ़िगर किए जाते हैं. हालांकि, Map के setOptions() तरीके को कॉल करके और उसे नए कंट्रोल विकल्प देकर, कंट्रोल के प्रज़ेंटेशन को डाइनैमिक तौर पर बदला जा सकता है.

कंट्रोल में बदलाव करना

मैप के MapOptions ऑब्जेक्ट में मौजूद फ़ील्ड की मदद से मैप बनाते समय, यह तय किया जाता है कि कंट्रोल को कैसे दिखाया जाए. इन फ़ील्ड के बारे में यहां बताया गया है:

• cameraControl, कैमरे के कंट्रोल को चालू/बंद करता है. इससे उपयोगकर्ता, मैप को ज़ूम और पैन कर सकता है. यह कंट्रोल, सभी मैप पर डिफ़ॉल्ट रूप से दिखता है. cameraControlOptions फ़ील्ड, इस कंट्रोल के लिए इस्तेमाल किए जाने वाले CameraControlOptions के बारे में भी बताता है.
• mapTypeControl, मैप टाइप कंट्रोल को चालू/बंद करता है. इससे उपयोगकर्ता, मैप टाइप (जैसे, मैप और सैटलाइट) के बीच टॉगल कर सकता है. डिफ़ॉल्ट रूप से, यह कंट्रोल दिखता है और मैप के सबसे ऊपर बाएं कोने में मौजूद होता है. mapTypeControlOptions फ़ील्ड, इस कंट्रोल के लिए इस्तेमाल किए जाने वाले MapTypeControlOptions के बारे में भी बताता है.
• streetViewControl, पेगमैन कंट्रोल को चालू/बंद करता है. इससे उपयोगकर्ता, Street View पैनोरमा को चालू कर सकता है. डिफ़ॉल्ट रूप से, यह कंट्रोल दिखता है और मैप के सबसे नीचे दाईं ओर मौजूद होता है. streetViewControlOptions फ़ील्ड, इस कंट्रोल के लिए इस्तेमाल किए जाने वाले StreetViewControlOptions के बारे में भी बताता है.
• rotateControl, 3D इमेज के ओरिएंटेशन को कंट्रोल करने के लिए, घुमाने वाले कंट्रोल को चालू/बंद करता है. डिफ़ॉल्ट रूप से, कंट्रोल की मौजूदगी इस बात से तय होती है कि मौजूदा ज़ूम और जगह पर, दिए गए मैप टाइप के लिए 3D इमेजरी मौजूद है या नहीं. मैप के rotateControlOptions को सेट करके, कंट्रोल के काम करने के तरीके में बदलाव किया जा सकता है. इससे, इस्तेमाल किए जाने वाले RotateControlOptions के बारे में बताया जा सकता है. यह कंट्रोल सिर्फ़ 3D बुनियादी मैप पर दिखेगा.
• scaleControl, स्केल कंट्रोल को चालू/बंद करता है. इससे मैप का स्केल मिलता है. डिफ़ॉल्ट रूप से, यह कंट्रोल नहीं दिखता. चालू होने पर, यह हमेशा मैप के सबसे नीचे दाएं कोने में दिखेगा. scaleControlOptions, इस कंट्रोल के लिए इस्तेमाल किए जाने वाले ScaleControlOptions के बारे में भी बताता है.
• fullscreenControl, मैप को फ़ुलस्क्रीन मोड में खोलने वाले कंट्रोल को चालू/बंद करता है. यह कंट्रोल, डेस्कटॉप और Android डिवाइसों पर डिफ़ॉल्ट रूप से चालू होता है. चालू होने पर, यह कंट्रोल मैप के सबसे ऊपर दाईं ओर दिखता है. fullscreenControlOptions, इस कंट्रोल के लिए इस्तेमाल किए जाने वाले FullscreenControlOptions के बारे में भी बताता है.

ध्यान दें कि आपके पास उन कंट्रोल के लिए विकल्प तय करने की सुविधा होती है जिन्हें आपने शुरुआत में बंद किया था.

कंट्रोल की पोज़िशन

कंट्रोल के ज़्यादातर विकल्पों में position प्रॉपर्टी (ControlPosition टाइप की) होती है. इससे पता चलता है कि मैप पर कंट्रोल को कहां रखना है. इन कंट्रोल की पोज़िशन तय नहीं होती. इसके बजाय, एपीआई कंट्रोल को समझदारी से लेआउट करेगा. इसके लिए, वह मैप के मौजूदा एलिमेंट या अन्य कंट्रोल के आस-पास कंट्रोल को फ़्लो करेगा. ऐसा वह दी गई सीमाओं (जैसे, मैप का साइज़) के अंदर करेगा.

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

नीचे दी गई टेबल में, एलटीआर और आरटीएल के हिसाब से कंट्रोल की जगह की जानकारी दी गई है.

एलटीआर पोज़िशन

Position (LTR Context)	लॉजिकल कॉन्स्टेंट (सुझाया गया)	लेगसी कॉन्स्टेंट
सबसे ऊपर बाईं ओर	BLOCK_START_INLINE_START	TOP_LEFT
सबसे ऊपर बीच में	BLOCK_START_INLINE_CENTER	TOP_CENTER
सबसे ऊपर दाईं ओर	BLOCK_START_INLINE_END	TOP_RIGHT
बाईं ओर सबसे ऊपर	INLINE_START_BLOCK_START	LEFT_TOP
बाईं ओर बीच में	INLINE_START_BLOCK_CENTER	LEFT_CENTER
बाईं ओर सबसे नीचे	INLINE_START_BLOCK_END	LEFT_BOTTOM
सबसे ऊपर दाईं ओर	INLINE_END_BLOCK_START	RIGHT_TOP
दाईं ओर बीच में	INLINE_END_BLOCK_CENTER	RIGHT_CENTER
सबसे नीचे दाईं ओर	INLINE_END_BLOCK_END	RIGHT_BOTTOM
सबसे नीचे बाईं ओर	BLOCK_END_INLINE_START	BOTTOM_LEFT
सबसे नीचे, बीच में	BLOCK_END_INLINE_CENTER	BOTTOM_CENTER
सबसे नीचे दाईं ओर	BLOCK_END_INLINE_END	BOTTOM_RIGHT

दाएं से बाएं (आरटीएल) क्रम

Position (RTL Context)	लॉजिकल कॉन्स्टेंट (सुझाया गया)	लेगसी कॉन्स्टेंट
सबसे ऊपर दाईं ओर	BLOCK_START_INLINE_START	TOP_RIGHT
सबसे ऊपर बीच में	BLOCK_START_INLINE_CENTER	TOP_CENTER
सबसे ऊपर बाईं ओर	BLOCK_START_INLINE_END	TOP_LEFT
सबसे ऊपर दाईं ओर	INLINE_START_BLOCK_START	RIGHT_TOP
दाईं ओर बीच में	INLINE_START_BLOCK_CENTER	RIGHT_CENTER
सबसे नीचे दाईं ओर	INLINE_START_BLOCK_END	RIGHT_BOTTOM
बाईं ओर सबसे ऊपर	INLINE_END_BLOCK_START	LEFT_TOP
बाईं ओर बीच में	INLINE_END_BLOCK_CENTER	LEFT_CENTER
बाईं ओर सबसे नीचे	INLINE_END_BLOCK_END	LEFT_BOTTOM
सबसे नीचे दाईं ओर	BLOCK_END_INLINE_START	BOTTOM_RIGHT
सबसे नीचे, बीच में	BLOCK_END_INLINE_CENTER	BOTTOM_CENTER
सबसे नीचे बाईं ओर	BLOCK_END_INLINE_END	BOTTOM_LEFT

मैप को एलटीआर और आरटीएल मोड के बीच टॉगल करने के लिए, लेबल पर क्लिक करें.

ध्यान दें कि ये पोज़िशन, यूज़र इंटरफ़ेस (यूआई) के उन एलिमेंट की पोज़िशन से मेल खा सकती हैं जिनकी जगह में बदलाव नहीं किया जा सकता. जैसे, कॉपीराइट और Google का लोगो. इन मामलों में, कंट्रोल हर पोज़िशन के लिए बताए गए लॉजिक के हिसाब से फ़्लो होंगे और अपनी बताई गई पोज़िशन के जितना हो सके उतना करीब दिखेंगे. इस बात की कोई गारंटी नहीं है कि जटिल लेआउट की वजह से, कंट्रोल ओवरलैप नहीं होंगे. हालांकि, एपीआई उन्हें बेहतर तरीके से व्यवस्थित करने की कोशिश करेगा.

नीचे दिए गए उदाहरण में, एक बुनियादी मैप दिखाया गया है. इसमें सभी कंट्रोल चालू हैं और वे अलग-अलग जगहों पर मौजूद हैं.

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.js

उदाहरण देखें

कस्टम कंट्रोल

मौजूदा एपीआई कंट्रोल की स्टाइल और पोज़िशन में बदलाव करने के साथ-साथ, उपयोगकर्ता के साथ इंटरैक्शन को मैनेज करने के लिए, अपने कंट्रोल भी बनाए जा सकते हैं. कंट्रोल, स्थिर विजेट होते हैं. ये मैप के ऊपर, तय पोज़िशन पर फ़्लोट करते हैं. वहीं, ओवरले, मैप के साथ मूव करते हैं. बुनियादी तौर पर, कंट्रोल एक <div> एलिमेंट होता है, जिसकी मैप पर एक तय पोज़िशन होती है. यह उपयोगकर्ता को कुछ यूज़र इंटरफ़ेस (यूआई) दिखाता है. साथ ही, उपयोगकर्ता या मैप के साथ इंटरैक्शन को मैनेज करता है. आम तौर पर, यह इवेंट हैंडलर के ज़रिए किया जाता है.

पसंद के मुताबिक कंट्रोल बनाने के लिए, कुछ नियम ज़रूरी हैं. हालांकि, इन दिशा-निर्देशों को सबसे सही तरीके के तौर पर इस्तेमाल किया जा सकता है:

• कंट्रोल एलिमेंट दिखाने के लिए, सही सीएसएस तय करें.
• मैप की प्रॉपर्टी में बदलावों या उपयोगकर्ता के इवेंट (उदाहरण के लिए, 'click' इवेंट) के लिए, इवेंट हैंडलर की मदद से उपयोगकर्ता या मैप के साथ इंटरैक्शन को मैनेज करें.
• कंट्रोल को होल्ड करने के लिए, <div> एलिमेंट बनाएं और इस एलिमेंट को Map की controls प्रॉपर्टी में जोड़ें.

इनमें से हर समस्या के बारे में यहां बताया गया है.

कस्टम कंट्रोल ड्रॉ करना

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

आकर्षक कंट्रोल डिज़ाइन करने के लिए, सीएसएस और डीओएम स्ट्रक्चर की कुछ जानकारी होनी चाहिए. नीचे दिए गए कोड के उदाहरणों में, डिक्लेरेटिव एचटीएमएल और प्रोग्रामैटिक तरीकों, दोनों का इस्तेमाल करके कस्टम कंट्रोल जोड़ने का तरीका बताया गया है.

डिक्लेरेटिव सीएसएस

यहां दी गई सीएसएस स्टाइल, डिफ़ॉल्ट कंट्रोल के मुताबिक लुक देती हैं. नीचे दिए गए दोनों उदाहरणों के साथ इन स्टाइल का इस्तेमाल करें:

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

डिक्लेरेटिव एचटीएमएल

इन कोड स्निपेट से पता चलता है कि डिक्लेरेटिव तरीके से कस्टम कंट्रोल कैसे बनाया जाता है. एचटीएमएल में, कंट्रोल को पोज़िशन करने के लिए container आईडी वाले DIV का इस्तेमाल किया जाता है. इसे gmp-map एलिमेंट में नेस्ट किया जाता है और बटन को DIV में जोड़ा जाता है. मैप के सबसे ऊपर बाएं कोने में कंट्रोल को पोज़िशन करने के लिए, slot एट्रिब्यूट को control-inline-start-block-start पर सेट किया जाता है.

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

JavaScript में, getElementById() का इस्तेमाल करके DIV और बटन को ढूंढा जाता है. इसके बाद, बटन में एक इवेंट लिसनर जोड़ा जाता है और बटन को DIV में जोड़ दिया जाता है.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

प्रोग्रामैटिक JavaScript

इस कोड स्निपेट में, प्रोग्राम के हिसाब से बटन कंट्रोल बनाने का तरीका बताया गया है. सीएसएस स्टाइल के बारे में ऊपर बताया गया है.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

कस्टम कंट्रोल से इवेंट मैनेज करना

किसी कंट्रोल को काम का बनाने के लिए, उसे असल में कुछ करना चाहिए. यह आप पर निर्भर करता है कि कंट्रोल क्या करता है. कंट्रोल, उपयोगकर्ता के इनपुट या Map की स्थिति में हुए बदलावों के हिसाब से काम कर सकता है.

उपयोगकर्ता के इनपुट का जवाब देने के लिए, addEventListener() का इस्तेमाल करें. यह इस्तेमाल किए जा सकने वाले डीओएम इवेंट को मैनेज करता है. नीचे दिया गया कोड स्निपेट, ब्राउज़र के 'click' इवेंट के लिए एक लिसनर जोड़ता है. ध्यान दें कि यह इवेंट, मैप से नहीं, बल्कि डीओएम से मिलता है.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

कस्टम कंट्रोल को सुलभ बनाना

यह पक्का करने के लिए कि कंट्रोल को कीबोर्ड इवेंट मिलें और वे स्क्रीन रीडर को सही तरीके से दिखें:

• बटन, फ़ॉर्म एलिमेंट, और लेबल के लिए हमेशा नेटिव एचटीएमएल एलिमेंट का इस्तेमाल करें. नेटिव कंट्रोल को होल्ड करने के लिए, कंटेनर के तौर पर सिर्फ़ DIV एलिमेंट का इस्तेमाल करें. DIV को कभी भी इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) एलिमेंट के तौर पर इस्तेमाल न करें.
• यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बारे में जानकारी देने के लिए, ज़रूरत के हिसाब से label एलिमेंट, title एट्रिब्यूट या aria-label एट्रिब्यूट का इस्तेमाल करें.

पसंद के मुताबिक बनाए गए कंट्रोल की पोज़िशन

कस्टम कंट्रोल की जगह तय करने के लिए, slot एट्रिब्यूट का इस्तेमाल करें. साथ ही, कंट्रोल की ज़रूरी जगह की जानकारी दें. इन पोज़िशन के बारे में जानकारी के लिए, ऊपर दिया गया कंट्रोल पोज़िशनिंग सेक्शन देखें.

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

यहां दिया गया कोड, एक नया कस्टम कंट्रोल बनाता है (इसका कंस्ट्रक्टर नहीं दिखाया गया है) और इसे BLOCK_START_INLINE_END पोज़िशन (एलटीआर कॉन्टेक्स्ट में सबसे ऊपर दाईं ओर) पर मैप में जोड़ता है.

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

कस्टम कंट्रोल की पोज़िशन को डिक्लेरेटिव तरीके से सेट करने के लिए, एचटीएमएल में slot एट्रिब्यूट सेट करें:

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

कस्टम कंट्रोल का उदाहरण

नीचे दिया गया कंट्रोल आसान है (हालांकि, यह ज़्यादा काम का नहीं है) और इसमें ऊपर दिखाए गए पैटर्न शामिल हैं. यह कंट्रोल, डीओएम 'click' इवेंट के हिसाब से काम करता है. इसके लिए, यह मैप को किसी डिफ़ॉल्ट जगह पर सेट करता है:

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से कंपाइल किया जाता है.

उदाहरण देखें

कंट्रोल में राज्य की जानकारी जोड़ें

कंट्रोल, स्टेट को भी सेव कर सकते हैं. यहां दिया गया उदाहरण, पहले दिखाए गए उदाहरण से मिलता-जुलता है. हालांकि, कंट्रोल में "होम सेट करें" बटन भी शामिल है. यह बटन, कंट्रोल को होम की नई जगह दिखाने के लिए सेट करता है. हम ऐसा करने के लिए, कंट्रोल में एक home_ प्रॉपर्टी बनाते हैं, ताकि इस स्थिति को सेव किया जा सके. साथ ही, उस स्थिति के लिए गेटर और सेटर उपलब्ध कराते हैं.

TypeScript

let innerMap: google.maps.Map;
const mapElement = document.querySelector('gmp-map')!;

let center: google.maps.LatLngLiteral | google.maps.LatLng = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById(
        'btnCenterMap'
    ) as HTMLInputElement;
    const setCenterButton = document.getElementById(
        'btnSetCenter'
    ) as HTMLInputElement;

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

let innerMap;
const mapElement = document.querySelector('gmp-map');

let center = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById('btnCenterMap');
    const setCenterButton = document.getElementById('btnSetCenter');

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.js

उदाहरण देखें