नियंत्रण

प्लैटफ़ॉर्म चुनें: 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

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

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: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.ts

JavaScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.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 टाइप की) होती है. इससे पता चलता है कि मैप पर कंट्रोल को कहां रखना है. इन कंट्रोल की पोज़िशन तय नहीं होती. इसके बजाय, API दिए गए कंस्ट्रेंट (जैसे कि मैप का साइज़) के हिसाब से, मैप के मौजूदा एलिमेंट या अन्य कंट्रोल के आस-पास कंट्रोल को स्मार्ट तरीके से लेआउट करेगा.

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

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

बाएं से दाएं की ओर टेक्स्ट की स्थितियां

जगह (बाएं से दाएं के हिसाब से) लॉजिकल कॉन्स्टेंट (सुझाया गया) लेगसी कॉन्स्टेंट
सबसे ऊपर बाईं ओर 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

दाएं से बाएं की ओर टेक्स्ट लिखने की सुविधा वाली भाषाएं

जगह (दाएं से बाएं के हिसाब से) लॉजिकल कॉन्स्टेंट (सुझाया गया) लेगसी कॉन्स्टेंट
सबसे ऊपर दाईं ओर 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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
index.js
उदाहरण देखें

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

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

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

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

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

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

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

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

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

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

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

.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' इवेंट के लिए एक लिसनर जोड़ता है. ध्यान दें कि यह इवेंट, मैप से नहीं, बल्कि DOM से मिला है.

// 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>

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

यहां दिया गया कंट्रोल आसान है, हालांकि यह खास तौर पर काम का नहीं है. इसमें ऊपर दिखाए गए पैटर्न को एक साथ इस्तेमाल किया गया है. यह कंट्रोल, DOM '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

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
उदाहरण देखें

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

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

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

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

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

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

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

JavaScript

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js
उदाहरण देखें

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