शुरू करें

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

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

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

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

Maps JavaScript API चालू करना

Maps Datas API को चालू करना

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

नया मैप आईडी बनाने के लिए, Cloud कस्टमाइज़ेशन में दिया गया तरीका अपनाएं. मैप के टाइप को 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',
});

वेक्टर मैप आईडी बनाएं

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

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

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

अगर डेटासेट की झलक के लिए डेटा-ड्रिवन स्टाइलिंग का इस्तेमाल करना है, तो सबसे पहले 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: "beta",
    // 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.
  }
});

अगले चरण