ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং সহ সেট আপ করতে এই পদক্ষেপগুলি অনুসরণ করুন৷
একটি API কী পান এবং APIগুলি সক্ষম করুন৷
ডেটাসেটগুলির জন্য ডেটা-চালিত স্টাইলিং ব্যবহার করার আগে, আপনার প্রয়োজন: একটি বিলিং অ্যাকাউন্ট সহ Google ক্লাউড প্রকল্প এবং মানচিত্র জাভাস্ক্রিপ্ট API এবং মানচিত্র ডেটাসেট API উভয়ই সক্ষম৷ আরও জানতে, আপনার Google ক্লাউড প্রকল্প সেট আপ দেখুন।
একটি নতুন মানচিত্র ID তৈরি করতে, ক্লাউড কাস্টমাইজেশনের ধাপগুলি অনুসরণ করুন৷ জাভাস্ক্রিপ্টে মানচিত্রের ধরন সেট করুন এবং ভেক্টর বিকল্পটি নির্বাচন করুন।
আপনি যখন মানচিত্রটি ইনস্ট্যান্টিয়েট করেন তখন mapId বৈশিষ্ট্য ব্যবহার করে একটি মানচিত্র ID প্রদান করুন৷ মানচিত্র ID প্রদর্শনের জন্য ডেটাসেটের সাথে সংশ্লিষ্ট মানচিত্রের শৈলীর সাথে সঙ্গতিপূর্ণ হওয়া আবশ্যক।
ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং ব্যবহার করতে, প্রথমে আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে Maps JavaScript API লোড করুন, যেমনটি এখানে দেখানো হয়েছে (আপনার API script ট্যাগে v=beta ব্যবহার করুন):
<script>
(g=>{varh,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});vard=b.maps||(b.maps={}),r=newSet,e=newURLSearchParams,u=()=>h||(h=newPromise(async(f,n)=>{await(a=m.createElement("script"));e.set("libraries",[...r]+"");for(king)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 শ্রোতা যোগ করতে পারেন। এটি নির্দেশ করবে যে নিম্নলিখিত শর্তগুলি পূরণ করা হয়েছে কিনা:
একটি বৈধ মানচিত্র আইডি ব্যবহার করা হচ্ছে৷
মানচিত্র ID একটি ভেক্টর মানচিত্রের সাথে যুক্ত।
মানচিত্র ক্ষমতা ব্যবহার করা ঐচ্ছিক, এবং শুধুমাত্র পরীক্ষা এবং সমস্যা সমাধানের উদ্দেশ্যে বা রানটাইম ফলব্যাক উদ্দেশ্যে সুপারিশ করা হয়।
// Optional: subscribe to map capability changes.map.addListener('mapcapabilities_changed',()=>{constmapCapabilities=map.getMapCapabilities();if(!mapCapabilities.isDataDrivenStylingAvailable){// Data-driven styling is *not* available, add a fallback.// Existing feature layers are also unavailable.}});
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2025-09-04 UTC-তে শেষবার আপডেট করা হয়েছে।"],[[["\u003cp\u003eTo utilize data-driven styling for datasets, obtain an API key, enable necessary APIs (Maps JavaScript API and Maps Datasets API), and create a map ID associated with a vector-based map style.\u003c/p\u003e\n"],["\u003cp\u003eInitialization involves providing the map ID during map instantiation and loading the Maps JavaScript API with the \u003ccode\u003ev=beta\u003c/code\u003e parameter in the script tag.\u003c/p\u003e\n"],["\u003cp\u003eFor troubleshooting, optionally use the \u003ccode\u003emapcapabilities_changed\u003c/code\u003e listener to verify map capabilities, such as a valid map ID linked to a vector map, ensuring data-driven styling functionality.\u003c/p\u003e\n"],["\u003cp\u003eAfter setup, proceed to create and upload a dataset to leverage data-driven styling within your maps.\u003c/p\u003e\n"]]],["To utilize data-driven styling, first get an API key and enable the Maps JavaScript and Datasets APIs. Create a map ID of type \"JavaScript\" and \"Vector,\" then associate it with a new map style. In the map initialization code, use the `mapId` property with your created ID and load the Maps JavaScript API with an inline bootstrap loader. Optionally, use a `mapcapabilities_changed` listener to ensure a valid map ID is used and troubleshoot any issues.\n"],null,["Select platform: [Android](/maps/documentation/android-sdk/dds-datasets/start \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/dds-datasets/start \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/dds-datasets/start \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nFollow these steps to get set up with the data-driven styling for datasets.\n\nGet an API key and enable APIs\n\nBefore using the data-driven styling for datasets, you need:\nGoogle Cloud project with a billing account, and both the\nMaps JavaScript API and the Maps Datasets API enabled.\nTo learn more, see\n[Set up your Google Cloud project](/maps/documentation/javascript/cloud-setup).\n\n[Get an API key](/maps/documentation/javascript/get-api-key)\n\n\n[Enable the Maps JavaScript API](https://console.cloud.google.com/apis/library/maps-backend.googleapis.com)\n\n\n[Enable the Maps Datasets API](https://console.cloud.google.com/apis/library/mapsplatformdatasets.googleapis.com)\n\nCreate a map ID\n\nTo create a new [map ID](/maps/documentation/javascript/map-ids/mapid-over),\nfollow the steps in\n[Cloud customization](/maps/documentation/javascript/map-ids/get-map-id).\nSet the Map type to **JavaScript** , and select the **Vector** option.\n\nProvide a map ID using the `mapId` property when you instantiate the map .\nThe map ID must correspond to the map style that is associated with the dataset\nto display. \n\n```javascript\nconst position = new google.maps.LatLng(40.75, -74.05);\nconst map = new google.maps.Map(document.getElementById('map'), {\n zoom: 11,\n center: position,\n mapId: 'YOUR_MAP_ID',\n});\n```\n\nCreate a new map style\n\nTo create a new map style, follow the instructions in\n[Create and use map styles](/maps/documentation/javascript/cloud-customization/map-styles-leg)\nto create the style, and\n[associate the style with the map ID you just created](/maps/documentation/javascript/cloud-customization/map-styles-leg#associate-style-with-map-id).\n\nUpdate your map initialization code\n\nTo use the data-driven styling for datasets, first load the\nMaps JavaScript API, by adding the inline bootstrap loader to\nyour application code, as shown here\n(use `v=beta` in your API `script` tag): \n\n```javascript\n\u003cscript\u003e\n (g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})({\n key: \"YOUR_API_KEY\",\n v: \"weekly\",\n // Use the 'v' parameter to indicate the /maps/documentation/javascript/versions to use (weekly, beta, alpha, etc.).\n // Add other /maps/documentation/javascript/load-maps-js-api#required_parameters as needed, using camel case.\n });\n\u003c/script\u003e\n```\n\nCheck map capabilities (optional)\n\nData-driven styling for datasets requires a map ID. If the map ID is missing,\nor an invalid map ID is passed, data features cannot load. As a\ntroubleshooting step, you can add a `mapcapabilities_changed` listener to\nsubscribe to map capability changes. This will indicate whether the following\nconditions have been met:\n\n- A valid map ID is in use.\n- The map ID is associated with a vector map.\n\nUsing Map Capabilities is optional, and recommended only for testing and\ntroubleshooting purposes, or for runtime fallback purposes. \n\n```javascript\n// Optional: subscribe to map capability changes.\nmap.addListener('mapcapabilities_changed', () =\u003e {\n const mapCapabilities = map.getMapCapabilities();\n\n if (!mapCapabilities.isDataDrivenStylingAvailable) {\n // Data-driven styling is *not* available, add a fallback.\n // Existing feature layers are also unavailable.\n }\n});\n```\n\nNext steps\n\n- [Create and upload a dataset](/maps/documentation/javascript/dds-datasets/create-dataset)"]]
