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 (ज़रूरी नहीं) - तय की गई सुविधा की वह प्रॉपर्टी जिसे चुना जाना है. एलिमेंट, किसी सुविधा के सब-पार्ट होते हैं. इनमें लेबल और ज्यामिति शामिल हैं. अगर कोई एलिमेंट तय नहीं किया जाता है, तो सुविधा के सभी एलिमेंट चुने जाते हैं.
• स्टाइलर - चुनी गई सुविधाओं और एलिमेंट पर लागू किए जाने वाले नियम. स्टाइलर, सुविधा का रंग, दिखने की सेटिंग, और वेट बताते हैं. किसी सुविधा पर एक या एक से ज़्यादा स्टाइलर लागू किए जा सकते हैं.

स्टाइल तय करने के लिए, आपको 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) से पता चलता है कि एलिमेंट, मैप पर दिखता है या नहीं और कैसे दिखता है. A simplified विज़िबिलिटी से, असर वाली सुविधाओं से स्टाइल की कुछ सुविधाएं हट जाती हैं. उदाहरण के लिए, सड़कों को बिना आउटलाइन वाली पतली लाइनों में बदल दिया जाता है. वहीं, पार्कों के लेबल टेक्स्ट हट जाते हैं, लेकिन लेबल आइकॉन बरकरार रहते हैं.
• color (आरजीबी हेक्स स्ट्रिंग, जिसका फ़ॉर्मैट #RRGGBB) से, सुविधा का रंग सेट होता है.
• weight (इंटीजर वैल्यू, जो शून्य से ज़्यादा या उसके बराबर होती है) से सुविधा का वेट पिक्सल में सेट होता है. वेट को ज़्यादा वैल्यू पर सेट करने से, टाइल के बॉर्डर के पास क्लिप हो सकती है.

स्टाइल के नियम, तय किए गए क्रम में लागू होते हैं. एक ही स्टाइल ऑपरेशन में, एक से ज़्यादा कार्रवाइयां शामिल न करें. इसके बजाय, हर कार्रवाई को स्टाइल ऐरे में अलग एंट्री के तौर पर तय करें.

ध्यान दें: क्रम ज़रूरी है, क्योंकि कुछ कार्रवाइयां कम्यूटेटिव नहीं होती हैं. स्टाइल ऑपरेशन के ज़रिए बदली गई सुविधाओं और/या एलिमेंट में (आम तौर पर) पहले से ही स्टाइल मौजूद होती हैं. अगर पहले से स्टाइल मौजूद हैं, तो ऑपरेशन उन पर लागू होते हैं.

ह्यू, सैचुरेशन, लाइटनेस मॉडल

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

गामा करेक्शन, कलर स्पेस में लाइटनेस में बदलाव करता है. आम तौर पर, यह कंट्रास्ट बढ़ाने या घटाने के लिए किया जाता है. इसके अलावा, एचएसएल मॉडल, कोऑर्डिनेट स्पेस में रंग तय करता है . इसमें hue कलर व्हील में ओरिएंटेशन दिखाता है . वहीं, सैचुरेशन और लाइटनेस, अलग-अलग ऐक्सिस के साथ एंप्लीट्यूड दिखाते हैं . ह्यू को आरजीबी कलर स्पेस में मेज़र किया जाता है. यह ज़्यादातर आरजीबी कलर स्पेस जैसा ही होता है. हालांकि, इसमें सफ़ेद और काले रंग के शेड मौजूद नहीं होते.

hue एचटीएमएल हेक्स कलर वैल्यू लेता है. हालांकि, यह इस वैल्यू का इस्तेमाल सिर्फ़ बुनियादी रंग तय करने के लिए करता है. यानी, कलर व्हील के आस-पास इसका ओरिएंटेशन. न कि इसका सैचुरेशन या लाइटनेस. इन्हें प्रतिशत बदलाव के तौर पर अलग से दिखाया जाता है.

उदाहरण के लिए, प्योर ग्रीन के लिए ह्यू को hue:0x00ff00 या hue:0x000100 के तौर पर तय किया जा सकता है. दोनों ह्यू एक जैसे हैं. दोनों वैल्यू, एचएसएल कलर मॉडल में प्योर ग्रीन की ओर इशारा करती हैं.

आरजीबी कलर व्हील

आरजीबी hue वैल्यू में लाल, हरे, और नीले रंग के बराबर हिस्से शामिल होते हैं . ये वैल्यू, ह्यू नहीं दिखाती हैं, क्योंकि इनमें से कोई भी वैल्यू, एचएसएल कोऑर्डिनेट स्पेस में ओरिएंटेशन नहीं दिखाती . उदाहरण के लिए, "#000000" (काला), "#FFFFFF" (सफ़ेद), और स्लेटी रंग के सभी प्योर शेड. काला, सफ़ेद या स्लेटी रंग दिखाने के लिए, आपको सभी saturation हटाने होंगे (वैल्यू को -100 पर सेट करें) और lightness को अडजस्ट करना होगा.

इसके अलावा, मौजूदा सुविधाओं में बदलाव करते समय, जिनमें पहले से ही कलर स्कीम मौजूद है, hue जैसी वैल्यू बदलने से, उसका मौजूदा saturation या lightness नहीं बदलता.