डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग को सेट अप करने के लिए, यह तरीका अपनाएं.
एपीआई पासकोड पाएं और एपीआई चालू करें
डेटासेट के लिए डेटा-ड्रिवन स्टाइल का इस्तेमाल करने से पहले, आपके पास ये चीज़ें होनी चाहिए: बिलिंग खाते वाला Cloud प्रोजेक्ट और Maps JavaScript API और Maps डेटासेट एपीआई, दोनों चालू होने चाहिए. ज़्यादा जानने के लिए, अपना Google Cloud प्रोजेक्ट सेट अप करना लेख पढ़ें.
Maps JavaScript 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: "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
लिसनर जोड़ा जा सकता है. इससे पता चलेगा कि ये शर्तें पूरी हुई हैं या नहीं:
- मान्य मैप आईडी का इस्तेमाल किया जा रहा हो.
- मैप आईडी, वेक्टर मैप से जुड़ा होता है.
Map की क्षमताओं का इस्तेमाल करना ज़रूरी नहीं है. इसका सुझाव सिर्फ़ जांच और समस्या हल करने या रनटाइम फ़ॉलबैक के मकसद से दिया जाता है.
// 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. } });