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

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

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

अगर आपको एक ही स्टाइल को कई ऐप्लिकेशन में अपडेट करना है, तो क्लाउड कस्टमाइज़ेशन की सुविधा देखें. यह सुविधा Google Cloud Console में उपलब्ध है. इसके लिए, आपके पास मैप आईडी होना चाहिए. संभावित समस्याओं से बचने के लिए, एक ही ऐप्लिकेशन में क्लाउड की मदद से पसंद के मुताबिक बनाने की सुविधा और हार्डकोड की गई स्टाइल को एक साथ इस्तेमाल न करें.

उदाहरण

यहां दी गई 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"
}

एलिमेंट, किसी सुविधा के अलग-अलग हिस्से होते हैं. उदाहरण के लिए, किसी सड़क के लिए, मैप पर ग्राफ़िक लाइन (ज्यामिति) के साथ-साथ उसका नाम (लेबल) बताने वाला टेक्स्ट भी होता है.

ये एलिमेंट उपलब्ध हैं. हालांकि, ध्यान दें कि हो सकता है कि कोई खास सुविधा, इनमें से किसी भी एलिमेंट के साथ काम न करे, कुछ के साथ काम करे या सभी के साथ काम करे:

• 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 का इस्तेमाल किया गया है. अगर हो सके, तो बेहतर होगा कि आप absolute 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 (यह पूर्णांक वैल्यू होती है, जो शून्य से ज़्यादा या उसके बराबर होती है) से, फ़ीचर का वज़न पिक्सल में सेट होता है. वज़न को ज़्यादा वैल्यू पर सेट करने से, टाइल के बॉर्डर के आस-पास का हिस्सा कट सकता है.

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

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

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

ध्यान दें: ह्यू, संतृप्ति, हल्कापन, और गामा सेटिंग का असर, बेस मैप के स्टाइल पर निर्भर करता है. अगर Google, बुनियादी मैप के स्टाइल में कोई बदलाव करता है, तो इन बदलावों का असर आपके मैप की उन सुविधाओं पर पड़ता है जिनमें इन विकल्पों का इस्तेमाल किया गया है. अगर हो सके, तो बेहतर होगा कि आप color स्टाइलर का इस्तेमाल करें.

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

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

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

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

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

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

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