এবার শুরু করা যাক

ডেটাসেটের পূর্বরূপের জন্য ডেটা-চালিত স্টাইলিং সহ সেট আপ করতে এই পদক্ষেপগুলি অনুসরণ করুন৷

একটি API কী পান এবং APIগুলি সক্ষম করুন৷

ডেটাসেট পূর্বরূপের জন্য ডেটা-চালিত স্টাইলিং ব্যবহার করার আগে, আপনার প্রয়োজন: একটি বিলিং অ্যাকাউন্ট সহ ক্লাউড প্রকল্প এবং মানচিত্র জাভাস্ক্রিপ্ট API এবং মানচিত্র ডেটাসেট API উভয়ই সক্ষম৷ আরও জানতে, আপনার Google ক্লাউড প্রকল্প সেট আপ দেখুন।

একটি API কী পান

মানচিত্র জাভাস্ক্রিপ্ট API সক্ষম করুন৷

মানচিত্র ডেটাসেট API সক্ষম করুন৷

একটি মানচিত্র আইডি তৈরি করুন

একটি নতুন মানচিত্র ID তৈরি করতে, ক্লাউড কাস্টমাইজেশনের ধাপগুলি অনুসরণ করুন৷ জাভাস্ক্রিপ্টে মানচিত্রের ধরন সেট করুন এবং ভেক্টর বিকল্পটি নির্বাচন করুন।

আপনি যখন মানচিত্রটি ইনস্ট্যান্টিয়েট করেন তখন mapId বৈশিষ্ট্য ব্যবহার করে একটি মানচিত্র ID প্রদান করুন৷ মানচিত্র ID প্রদর্শনের জন্য ডেটাসেটের সাথে সংশ্লিষ্ট মানচিত্রের শৈলীর সাথে সঙ্গতিপূর্ণ হওয়া আবশ্যক।

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 লোড করুন, যেমনটি এখানে দেখানো হয়েছে (আপনার 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 শ্রোতা যোগ করতে পারেন। এটি নির্দেশ করবে যে নিম্নলিখিত শর্তগুলি পূরণ করা হয়েছে কিনা:

  • একটি বৈধ মানচিত্র আইডি ব্যবহার করা হচ্ছে৷
  • মানচিত্র ID একটি ভেক্টর মানচিত্রের সাথে যুক্ত।

মানচিত্র ক্ষমতা ব্যবহার করা ঐচ্ছিক, এবং শুধুমাত্র পরীক্ষা এবং সমস্যা সমাধানের উদ্দেশ্যে বা রানটাইম ফলব্যাক উদ্দেশ্যে সুপারিশ করা হয়।

// 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.
  }
});

পরবর্তী পদক্ষেপ