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