Maps JavaScript API के लिए स्टाइल रेफ़रंस

स्टाइल के विकल्पों की मदद से, Google Maps की स्टैंडर्ड स्टाइल को अपनी पसंद के मुताबिक बनाया जा सकता है. साथ ही, सड़कों, पार्कों, कारोबारों, और दिलचस्पी की अन्य जगहों जैसी सुविधाओं के विज़ुअल डिसप्ले को बदला जा सकता है. इन सुविधाओं के स्टाइल में बदलाव करने के साथ-साथ, इन्हें पूरी तरह से छिपाया भी जा सकता है. इसका मतलब है कि मैप के किसी खास कॉम्पोनेंट पर ज़ोर दिया जा सकता है या मैप को आस-पास के पेज की स्टाइल के हिसाब से बनाया जा सकता है.

उदाहरण

यहां दिए गए JSON स्टाइल के एलान से, मैप की सभी सुविधाओं का रंग ग्रे हो जाता है. इसके बाद, मुख्य सड़क की ज्यामिति का रंग नीला हो जाता है. साथ ही, लैंडस्केप के लेबल पूरी तरह से छिप जाते हैं:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

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 स्निपेट में, RGB वैल्यू का इस्तेमाल करके किसी सुविधा को हल्के हरे रंग में दिखाया गया है:

"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 (if 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 में कोई बदलाव नहीं होता.