शुरू करें

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

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

मैप आईडी बनाएं

नया मैप आईडी बनाने के लिए, Cloud कस्टमाइज़ेशन में दिया गया तरीका अपनाएं. मैप के टाइप को JavaScript पर सेट करें और वेक्टर विकल्प चुनें. मैप पर झुकाएं और घुमाना चालू करने के लिए, झुकाएं और/या रोटेट करें को चुनें. अगर तिरछा या हेडिंग के इस्तेमाल से आपके ऐप्लिकेशन पर बुरा असर पड़ेगा, तो झुकाएं और रोटेशन से सही का निशान हटाएं, ताकि उपयोगकर्ता टिल्ट और रोटेशन को अडजस्ट न कर सकें.

मैप की नई स्टाइल बनाएं

मैप की नई स्टाइल बनाने के लिए, मैप की स्टाइल मैनेज करें में दिए गए निर्देशों का पालन करके स्टाइल बनाएं और स्टाइल को अभी बनाए गए मैप आईडी से जोड़ें.

सुविधा लेयर चुनें

Google API कंसोल में, आपके पास यह चुनने का विकल्प होता है कि किस सुविधा की लेयर को दिखाना है. इससे यह तय होता है कि मैप पर किस तरह की सीमाएं दिखेंगी (उदाहरण के लिए, इलाके, राज्य वगैरह).

अहम जानकारी: बेहतर परफ़ॉर्मेंस के लिए, सिर्फ़ अपनी ज़रूरत की लेयर चुनें.

सुविधा लेयर मैनेज करने के लिए

1. Google API कंसोल में, मैप की स्टाइल वाले पेज पर जाएं.
2. अनुरोध किए जाने पर प्रोजेक्ट चुनें.
3. मैप की स्टाइल चुनें.
4. लेयर जोड़ने या हटाने के लिए, सुविधा लेयर ड्रॉप-डाउन पर क्लिक करें.
5. अपने बदलावों को सेव करने और उन्हें अपने मैप पर उपलब्ध कराने के लिए, सेव करें पर क्लिक करें.

अपना मैप इनिशलाइज़ेशन कोड अपडेट करना

इसके लिए अभी-अभी बनाए गए मैप आईडी की ज़रूरत होती है. यह आपके मैप मैनेजमेंट पेज पर देखा जा सकता है.

अहम जानकारी: आपका मैप आईडी और एपीआई पासकोड, एक ही Google Cloud Console प्रोजेक्ट से जुड़े होने चाहिए. इसी तरह, मैप आईडी को मैप की स्टाइल से जोड़ा जाना चाहिए. इसमें एक या उससे ज़्यादा सुविधा लेयर चालू होनी चाहिए.

1. जैसा कि इस स्निपेट में दिखाया गया है, अपने ऐप्लिकेशन कोड में इनलाइन बूटस्ट्रैप लोडर जोड़कर Maps JavaScript API लोड करें:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

ध्यान दें: Maps JavaScript API ऐप्लिकेशन के डेवलपर के तौर पर यह पक्का करना आपकी ज़िम्मेदारी है कि आपका ऐप्लिकेशन स्थानीय कानूनों का पालन करता हो. इसके लिए, यह पक्का करना होता है कि जिस देश में ऐप्लिकेशन होस्ट किया गया है वहां इलाके की स्थानीय भाषा के हिसाब से सही कोड लागू किए गए हैं.

1. mapId प्रॉपर्टी का इस्तेमाल करके मैप इंस्टैंशिएट करते समय, मैप आईडी दें. यह वही मैप आईडी होना चाहिए जिसे आपने सुविधा लेयर वाली मैप स्टाइल का इस्तेमाल करके कॉन्फ़िगर किया था.

   map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
   });

Maps JavaScript API को लोड करने के बारे में ज़्यादा जानें.

मैप में सुविधा लेयर जोड़ें

अपने मैप पर किसी फ़ीचर लेयर का रेफ़रंस पाने के लिए, map.getFeatureLayer() को कॉल करें. ऐसा तब करें, जब मैप शुरू होता है:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

देखें कि मैप में कितना जानकारी है

सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग के लिए, ऐसी क्षमताओं की ज़रूरत होती है जो Google API कंसोल में चालू हों और किसी मैप आईडी से जुड़ी हों. मैप आईडी कुछ ही समय के लिए होते हैं और इनमें बदलाव भी हो सकते हैं. इसलिए, इन्हें कॉल करने से पहले, कोई खास सुविधा (जैसे कि डेटा-ड्रिवन स्टाइलिंग) उपलब्ध है या नहीं, इसकी पुष्टि करने के लिए map.getMapCapabilities() को कॉल करें. इस जांच की पुष्टि करना ज़रूरी नहीं है.

इस उदाहरण में, मैप करने की क्षमता में होने वाले बदलावों के लिए, लिसनर को जोड़ने का तरीका बताया गया है:

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

अगले चरण

• बाउंड्री पॉलीगॉन की फ़ॉर्मैटिंग करना
• कोरोप्लेथ मैप बनाना
• माउस इवेंट मैनेज करना
• किसी क्षेत्र का जगह आईडी पाना
• सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग के साथ जियोकोडिंग और Places API का इस्तेमाल करना