स्टाइल के विकल्पों की मदद से, Google मैप की स्टैंडर्ड स्टाइल को पसंद के मुताबिक बनाया जा सकता है. इससे सड़कों, पार्कों, कारोबारों, और दिलचस्प जगहों जैसी सुविधाओं के विज़ुअल डिसप्ले में बदलाव किया जा सकता है. इन सुविधाओं की स्टाइल बदलने के साथ-साथ, इन्हें पूरी तरह से छिपाया भी जा सकता है. इसका मतलब है कि मैप के कुछ कॉम्पोनेंट पर ज़ोर दिया जा सकता है या मैप को आस-पास के पेज के स्टाइल के मुताबिक बनाया जा सकता है.
उदाहरण
नीचे दिए गए JSON स्टाइल डिक्लेरेशन से, मैप की सभी सुविधाएं धूसर रंग में बदल जाती हैं. इसके बाद, मुख्य सड़क की ज्यामिति को नीले रंग में बदल दिया जाता है और लैंडस्केप लेबल को पूरी तरह से छिपा दिया जाता है:
[ { "featureType": "all", "stylers": [ { "color": "#C0C0C0" } ] },{ "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#CCFFFF" } ] },{ "featureType": "landscape", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ]
MapOptions.styles
प्रॉपर्टी को कॉल करते समय, स्टाइल कलेक्शन को
Map.setOptions() पर पास करें.
किसी ऐप्लिकेशन में JSON स्टाइलिंग का इस्तेमाल करने का तरीका दिखाने वाले उदाहरण के लिए, स्टाइल किए गए मैप का विकल्प देखें.
JSON ऑब्जेक्ट
JSON स्टाइल डिक्लेरेशन में ये एलिमेंट होते हैं:
- featureType (ज़रूरी नहीं) - स्टाइल में बदलाव करने के लिए, चुनी जाने वाली सुविधाएं. सुविधाएं, मैप पर मौजूद भौगोलिक विशेषताएं होती हैं. इनमें सड़कें, पार्क, पानी के स्रोत वगैरह शामिल हैं. अगर आपने किसी सुविधा के बारे में नहीं बताया है, तो सभी सुविधाएं चुन ली जाती हैं.
- elementType (ज़रूरी नहीं) - चुनी गई सुविधा की प्रॉपर्टी. एलिमेंट, किसी सुविधा के सब-पार्ट होते हैं. इनमें लेबल और ज्यामिति शामिल होती है. अगर आपने कोई एलिमेंट नहीं चुना है, तो सुविधा के सभी एलिमेंट चुन लिए जाते हैं.
- stylers - चुने गए एलिमेंट और सुविधाओं पर लागू होने वाले नियम. स्टाइलर से, सुविधा के रंग, विज़िबिलिटी, और वेट का पता चलता है. किसी सुविधा पर एक या उससे ज़्यादा स्टाइलर लागू किए जा सकते हैं.
कोई स्टाइल तय करने के लिए, आपको featureType और elementType सिलेक्टर के सेट और अपने stylers को स्टाइल कलेक्शन में जोड़ना होगा. एक ही कलेक्शन में, सुविधाओं के किसी भी कॉम्बिनेशन को टारगेट किया जा सकता है. हालांकि, एक बार में सीमित संख्या में ही स्टाइल लागू की जा सकती हैं. अगर आपके स्टाइल कलेक्शन में वर्णों की संख्या तय सीमा से ज़्यादा है, तो कोई भी स्टाइल लागू नहीं होगी.
इस पेज के बाकी हिस्से में, सुविधाओं, एलिमेंट, और स्टाइलर के बारे में ज़्यादा जानकारी दी गई है.
featureType
यहां दिया गया JSON स्निपेट, मैप पर मौजूद सभी सड़कों को चुनता है:
{ "featureType": "road" }
सुविधाएं या सुविधाओं के टाइप, मैप पर मौजूद भौगोलिक विशेषताएं होती हैं. इनमें सड़कें, पार्क, पानी के स्रोत, कारोबार वगैरह शामिल हैं.
सुविधाएं, कैटगरी ट्री बनाती हैं. इसमें all रूट के तौर पर होता है. अगर आपने कोई सुविधा नहीं चुनी है, तो सभी सुविधाएं चुन ली जाती हैं.
all की सुविधा तय करने पर भी यही असर होता है.
कुछ सुविधाओं में चाइल्ड सुविधाएं शामिल होती हैं. इन्हें डॉट नोटेशन का इस्तेमाल करके तय किया जाता है. उदाहरण के लिए, landscape.natural या
road.local. अगर आपने सिर्फ़ पैरंट सुविधा की जानकारी दी है, जैसे कि road, तो पैरंट के लिए तय की गई स्टाइल, उसकी सभी चाइल्ड सुविधाओं पर लागू होती हैं, जैसे कि road.local और road.highway.
ध्यान दें कि पैरंट सुविधाओं में कुछ ऐसे एलिमेंट शामिल हो सकते हैं जो उनकी सभी चाइल्ड सुविधाओं में शामिल नहीं हैं.
ये सुविधाएं उपलब्ध हैं:
all(डिफ़ॉल्ट) सभी सुविधाएं चुनता है.administrativeसे सभी प्रशासनिक क्षेत्र चुने जाते हैं. स्टाइलिंग का असर सिर्फ़ प्रशासनिक इलाकों के लेबल पर पड़ता है, भौगोलिक सीमाओं या फ़िल पर नहीं.administrative.country, देश चुनता है.administrative.land_parcel, ज़मीन के पार्सल चुनता है.administrative.localityने इलाके चुने.administrative.neighborhoodआस-पास के इलाके चुनता है.administrative.provinceप्रांतों को चुनता है.
landscape, लैंडस्केप मोड में मौजूद सभी फ़ोटो चुनता है.landscape.man_made, इंसानों की बनाई गई चीज़ों को चुनता है. जैसे, इमारतें और अन्य स्ट्रक्चर.landscape.natural, पहाड़, नदियां, रेगिस्तान, और ग्लेशियर जैसी प्राकृतिक जगहों को चुनता है.landscape.natural.landcover, लैंड कवर की सुविधाओं को चुनता है. ये ऐसी चीज़ें होती हैं जो पृथ्वी की सतह को कवर करती हैं. जैसे, जंगल, घास के मैदान, वेटलैंड, और बंजर ज़मीन.landscape.natural.terrain, ज़मीन की सतह की विशेषताओं को चुनता है. जैसे, ऊंचाई, ढलान, और ओरिएंटेशन.
poi, लोकप्रिय जगहों के सभी पॉइंट चुनता है.poi.attraction, पर्यटकों के घूमने की जगहें चुनता है.poi.businessकारोबार चुनता है.poi.government, सरकारी इमारतों को चुनता है.poi.medical, आपातकालीन सेवाओं को चुनता है. इनमें अस्पताल, फ़ार्मेसी, पुलिस, डॉक्टर वगैरह शामिल हैं.poi.park, पार्क चुनता है.poi.place_of_worship, पूजा-पाठ की जगहों को चुनता है. इनमें चर्च, मंदिर, मस्जिद वगैरह शामिल हैं.poi.schoolस्कूलों को चुनता है.poi.sports_complex, स्पोर्ट्स कॉम्प्लेक्स चुनता है.
roadसे सभी सड़कें चुनी जाती हैं.road.arterialने मुख्य सड़कों को चुना.road.highwayने हाइवे चुने.road.highway.controlled_access, सीमित ऐक्सेस वाले हाइवे चुनता है.road.local, स्थानीय सड़कों को चुनता है.
transit, बस, मेट्रो वगैरह के सभी स्टेशनों और लाइनों को चुनता है.transit.line, बस, मेट्रो वगैरह के रूट मैप चुनता है.transit.station, बस, मेट्रो वगैरह के सभी स्टेशन चुनता है.transit.station.airportहवाई अड्डों को चुनता है.transit.station.busने बस स्टॉप चुने.transit.station.rail, रेलवे स्टेशन चुनता है.
water, पानी के क्षेत्र चुनता है.
elementType
यहां दिए गए JSON स्निपेट से, सभी स्थानीय सड़कों के लेबल चुने जाते हैं:
{ "featureType": "road.local", "elementType": "labels" }
एलिमेंट, किसी सुविधा के सबडिवीज़न होते हैं. उदाहरण के लिए, किसी सड़क में मैप पर ग्राफ़िकल लाइन (ज्यामिति) और उसका नाम बताने वाला टेक्स्ट (लेबल) शामिल होता है.
यहां दिए गए एलिमेंट उपलब्ध हैं. हालांकि, ध्यान दें कि हो सकता है कि कोई सुविधा इनमें से किसी भी एलिमेंट, कुछ एलिमेंट या सभी एलिमेंट के साथ काम न करे:
ज़ूम करने के लेवल के हिसाब से, लेबल के टेक्स्ट fill और stroke के रंग बदल जाते हैं.
ज़ूम करने के सभी लेवल पर एक जैसा अनुभव देने के लिए, हमेशा fill और stroke, दोनों को तय करें.
all(डिफ़ॉल्ट) से, चुनी गई सुविधा के सभी एलिमेंट चुने जाते हैं.-
geometry, तय की गई सुविधा के सभी ज्यामितीय एलिमेंट चुनता है.geometry.fill, सुविधा की ज्यामिति के सिर्फ़ फ़िल को चुनता है.geometry.stroke, सुविधा की ज्यामिति के सिर्फ़ स्ट्रोक को चुनता है.
-
labels, चुनी गई सुविधा से जुड़े टेक्स्ट लेबल चुनता है.labels.icon, सुविधा के लेबल में दिखने वाले आइकॉन को ही चुनता है.labels.textसिर्फ़ लेबल का टेक्स्ट चुनता है.-
labels.text.fillसे सिर्फ़ लेबल का फ़िल चुना जाता है. आम तौर पर, लेबल के फ़िल को रंगीन आउटलाइन के तौर पर रेंडर किया जाता है. यह आउटलाइन, लेबल टेक्स्ट के चारों ओर होती है. labels.text.strokeसे सिर्फ़ लेबल के टेक्स्ट का स्ट्रोक चुना जाता है.
stylers
स्टाइलर, फ़ॉर्मैटिंग के ऐसे विकल्प होते हैं जिन्हें मैप की सुविधाओं और एलिमेंट पर लागू किया जा सकता है.
नीचे दिया गया JSON स्निपेट, आरजीबी वैल्यू का इस्तेमाल करके, किसी सुविधा को गहरे हरे रंग में दिखाता है:
"stylers": [ { "color": "#99FF33" } ]
यह स्निपेट, किसी सुविधा के रंग की इंटेंसिटी को पूरी तरह से हटा देता है. इससे कोई फ़र्क़ नहीं पड़ता कि उसका शुरुआती रंग क्या है. इससे सुविधा ग्रेस्केल में रेंडर होती है:
"stylers": [ { "saturation": -100 } ]
यह स्निपेट किसी सुविधा को पूरी तरह से छिपा देता है:
"stylers": [ { "visibility": "off" } ]
स्टाइल के ये विकल्प इस्तेमाल किए जा सकते हैं:
hue(#RRGGBBफ़ॉर्मैट की आरजीबी हेक्स स्ट्रिंग) से मुख्य रंग का पता चलता है.ध्यान दें: यह विकल्प, Google की डिफ़ॉल्ट स्टाइल (या मैप पर तय किए गए अन्य स्टाइल विकल्पों) में तय किए गए सैचुरेशन और रोशनी को बनाए रखते हुए, ह्यू को सेट करता है. नतीजे के तौर पर मिलने वाला रंग, बुनियादी मैप की स्टाइल के हिसाब से होता है. अगर Google, बुनियादी मैप की स्टाइल में कोई बदलाव करता है, तो उन बदलावों का असर आपके मैप की उन सुविधाओं पर पड़ता है जिन्हें
hueकी मदद से स्टाइल किया गया है. अगर हो सके, तो ऐब्सलूटcolorस्टाइलर का इस्तेमाल करना बेहतर होगा.lightness(-100और100के बीच की फ़्लोटिंग पॉइंट वैल्यू) से, एलिमेंट की चमक में हुए बदलाव का प्रतिशत पता चलता है. नेगेटिव वैल्यू से अंधेरा बढ़ता है. इसमें -100 का मतलब काला रंग है. वहीं, पॉज़िटिव वैल्यू से रोशनी बढ़ती है. इसमें +100 का मतलब सफ़ेद रंग है.ध्यान दें: यह विकल्प, डिफ़ॉल्ट Google स्टाइल (या मैप पर तय किए गए अन्य स्टाइल विकल्पों) में तय किए गए सैचुरेशन और ह्यू को बनाए रखते हुए, लाइटनेस को सेट करता है. नतीजे के तौर पर मिलने वाला रंग, बुनियादी मैप की स्टाइल के हिसाब से होता है. अगर Google, बुनियादी मैप की स्टाइल में कोई बदलाव करता है, तो उन बदलावों का असर आपके मैप की उन सुविधाओं पर पड़ता है जिन्हें
lightnessकी मदद से स्टाइल किया गया है. अगर हो सके, तो एब्सलूटcolorस्टाइलर का इस्तेमाल करना बेहतर होगा.saturation(-100और100के बीच की फ़्लोटिंग पॉइंट वैल्यू) से, एलिमेंट पर लागू किए जाने वाले बेसिक कलर की इंटेंसिटी में हुए बदलाव का प्रतिशत पता चलता है.ध्यान दें: यह विकल्प, Google की डिफ़ॉल्ट स्टाइल (या मैप पर तय किए गए अन्य स्टाइल विकल्पों) में तय किए गए रंग और चमक को बनाए रखते हुए, सैटुरेशन को सेट करता है. नतीजे के तौर पर मिलने वाला रंग, बुनियादी मैप की स्टाइल के हिसाब से होता है. अगर Google, बुनियादी मैप की स्टाइल में कोई बदलाव करता है, तो उन बदलावों का असर आपके मैप की उन सुविधाओं पर पड़ता है जिन्हें
saturationकी मदद से स्टाइल किया गया है. अगर हो सके, तो ऐब्सलूटcolorस्टाइलर का इस्तेमाल करना बेहतर होगा.gamma(0.01और10.0के बीच की फ़्लोटिंग पॉइंट वैल्यू, जहां1.0का मतलब है कि कोई सुधार नहीं किया गया है) से पता चलता है कि एलिमेंट पर कितना गामा करेक्शन लागू करना है. गामा करेक्शन, रंगों की चमक को नॉन-लीनियर तरीके से बदलते हैं. हालांकि, इससे सफ़ेद या काले रंग की वैल्यू पर कोई असर नहीं पड़ता. आम तौर पर, गामा करेक्शन का इस्तेमाल कई एलिमेंट के कंट्रास्ट में बदलाव करने के लिए किया जाता है. उदाहरण के लिए, एलिमेंट के किनारों और अंदरूनी हिस्सों के बीच कंट्रास्ट को बढ़ाने या घटाने के लिए, गामा में बदलाव किया जा सकता है.ध्यान दें: यह विकल्प, गामा कर्व का इस्तेमाल करके, Google की डिफ़ॉल्ट स्टाइल के हिसाब से रोशनी को अडजस्ट करता है. अगर Google, बुनियादी मैप की स्टाइल में कोई बदलाव करता है, तो इसका असर आपके मैप की उन सुविधाओं पर पड़ेगा जिन्हें
gammaकी मदद से स्टाइल किया गया है. अगर हो सके, तो ऐब्सलूटcolorस्टाइलर का इस्तेमाल करना बेहतर होगा.invert_lightness(अगरtrue) मौजूदा लाइटनेस को उलट देता है. उदाहरण के लिए, यह सुविधा सफ़ेद टेक्स्ट वाले गहरे रंग के मैप पर तुरंत स्विच करने के लिए काम की है.ध्यान दें: यह विकल्प, Google की डिफ़ॉल्ट स्टाइल को उलट देता है. अगर Google, बुनियादी मैप की स्टाइल में कोई बदलाव करता है, तो इसका असर आपके मैप की उन सुविधाओं पर पड़ता है जिन्हें
invert_lightnessकी मदद से स्टाइल किया गया है. अगर हो सके, तो ऐब्सलूटcolorस्टाइलर का इस्तेमाल करना बेहतर होगा.visibility(on,offयाsimplified) से पता चलता है कि एलिमेंट, मैप पर दिखेगा या नहीं और अगर दिखेगा, तो कैसे.simplifiedदिखने की सेटिंग चुनने पर, जिन सुविधाओं पर असर पड़ा है उनसे स्टाइल की कुछ सुविधाएं हट जाती हैं. उदाहरण के लिए, सड़कों को बिना आउटलाइन वाली पतली लाइनों में बदल दिया जाता है. वहीं, पार्क का लेबल टेक्स्ट हट जाता है, लेकिन लेबल आइकॉन बना रहता है.color(#RRGGBBफ़ॉर्मैट की आरजीबी हेक्स स्ट्रिंग) से, सुविधा का रंग सेट होता है.weight(शून्य से ज़्यादा या उसके बराबर की कोई पूर्णांक वैल्यू) से, पिक्सल में सुविधा का वेट सेट होता है. वज़न को ज़्यादा वैल्यू पर सेट करने से, टाइल के बॉर्डर के आस-पास क्लिपिंग हो सकती है.
स्टाइल के नियम, आपके तय किए गए क्रम में लागू होते हैं. एक से ज़्यादा कार्रवाइयों को एक ही स्टाइल वाली कार्रवाई में न जोड़ें. इसके बजाय, हर कार्रवाई को स्टाइल कलेक्शन में एक अलग एंट्री के तौर पर तय करें.
ध्यान दें: क्रम ज़रूरी है, क्योंकि कुछ ऑपरेशन क्रम-विनिमेय नहीं होते. आम तौर पर, स्टाइल ऑपरेशन की मदद से जिन सुविधाओं और/या एलिमेंट में बदलाव किया जाता है उनमें पहले से ही स्टाइल मौजूद होती हैं. अगर ये स्टाइल मौजूद हैं, तो कार्रवाइयां उन पर लागू होती हैं.
ह्यू, सैचुरेशन, लाइटनेस मॉडल
अलग-अलग स्टाइल में मैप, स्टाइलर ऑपरेशन में रंग दिखाने के लिए, ह्यू, सैचुरेशन, लाइटनेस (एचएसएल) मॉडल का इस्तेमाल करते हैं. ह्यू से मूल रंग का पता चलता है, सैचुरेशन से उस रंग की तीव्रता का पता चलता है, और लाइटनेस से पता चलता है कि उस रंग में सफ़ेद या काले रंग की मात्रा कितनी है.
गामा
करेक्शन से कलर स्पेस में रोशनी में बदलाव किया जाता है. आम तौर पर, ऐसा कंट्रास्ट को बढ़ाने या घटाने के लिए किया जाता है. इसके अलावा, एचएसएल मॉडल, कोऑर्डिनेट स्पेस में रंग तय करता है. इसमें hue, कलर व्हील में ओरिएंटेशन दिखाता है. वहीं, सैचुरेशन और लाइटनेस, अलग-अलग ऐक्सिस पर ऐम्प्लिट्यूड दिखाते हैं. ह्यू को आरजीबी कलर स्पेस में मेज़र किया जाता है. यह ज़्यादातर आरजीबी कलर स्पेस से मिलता-जुलता होता है. हालांकि, इसमें सफ़ेद और काले रंग के शेड नहीं होते.
hue, एचटीएमएल रंग का हेक्स कोड वैल्यू का इस्तेमाल करता है. हालांकि, यह इस वैल्यू का इस्तेमाल सिर्फ़ बुनियादी रंग तय करने के लिए करता है. इसका मतलब है कि यह कलर व्हील के आस-पास के ओरिएंटेशन को तय करता है, न कि उसके रंग का गहरा या फीका होना या लाइटनेस को. इन्हें प्रतिशत में हुए बदलावों के तौर पर अलग से दिखाया जाता है.
उदाहरण के लिए, गहरे हरे रंग के लिए ह्यू को hue:0x00ff00 या hue:0x000100 के तौर पर तय किया जा सकता है. दोनों रंग एक जैसे हैं. दोनों वैल्यू, एचएसएल कलर मॉडल में प्योर ग्रीन की ओर इशारा करती हैं.
आरजीबी कलर व्हील
आरजीबी hue वैल्यू में लाल, हरे, और नीले रंग के बराबर हिस्से होते हैं. इनसे ह्यू का पता नहीं चलता, क्योंकि इनमें से कोई भी वैल्यू, एचएसएल कोऑर्डिनेट स्पेस में ओरिएंटेशन नहीं दिखाती. उदाहरण के लिए, "#000000" (काला), "#FFFFFF" (सफ़ेद), और ग्रे के सभी शेड. काला, सफ़ेद या स्लेटी रंग दिखाने के लिए, आपको सभी saturation हटाने होंगे. इसके लिए, वैल्यू को -100 पर सेट करें. इसके बाद, lightness को अडजस्ट करें.
इसके अलावा, पहले से मौजूद उन सुविधाओं में बदलाव करते समय जिनमें पहले से ही कोई कलर स्कीम है, hue जैसी वैल्यू बदलने से, उसकी मौजूदा saturation या lightness में कोई बदलाव नहीं होता.