शुरू करें

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

डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग को सेट अप करने के लिए, यह तरीका अपनाएं.

एपीआई पासकोड पाएं और एपीआई चालू करें

डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग का इस्तेमाल करने से पहले, आपको इनकी ज़रूरत होगी: क्लाउड बिलिंग खाते वाले प्रोजेक्ट और Maps JavaScript API, दोनों और Maps Datasets API चालू कर दिया गया है. ज़्यादा जानने के लिए, अपना Google Cloud प्रोजेक्ट सेट अप करना लेख पढ़ें.

एपीआई पासकोड पाएं

Maps JavaScript API चालू करना

Maps Datasets API चालू करना

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

नया मैप आईडी बनाने के लिए, क्लाउड को पसंद के मुताबिक बनाना. मैप के टाइप को JavaScript पर सेट करें और वेक्टर विकल्प चुनें.

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

const position = new google.maps.LatLng(40.75, -74.05);
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: position,
  mapId: 'YOUR_MAP_ID',
});

वेक्टर मैप ID बनाएं

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

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

मैप शुरू करने के कोड को अपडेट करना

डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग का इस्तेमाल करने के लिए, सबसे पहले Maps JavaScript API लोड करें. जैसा कि यहां दिखाया गया है, अपने ऐप्लिकेशन कोड में इनलाइन बूटस्ट्रैप लोडर जोड़कर (अपने एपीआई script टैग में v=beta का इस्तेमाल करें):

<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>

मैप क्षमताओं की जाँच करें (वैकल्पिक)

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

  • मान्य मैप आईडी का इस्तेमाल किया जा रहा है.
  • मैप आईडी, वेक्टर मैप से जुड़ा होता है.

मैप की क्षमताओं का इस्तेमाल करना ज़रूरी नहीं है. साथ ही, इसका सुझाव सिर्फ़ जांच और या रनटाइम फ़ॉलबैक के लिए चाहिए.

// Optional: subscribe to map capability 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.
  }
});

अगले चरण