শুরু করুন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং সেট আপ করতে এই ধাপগুলো অনুসরণ করুন।

একটি API কী নিন এবং API সক্রিয় করুন

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

একটি এপিআই কী পান

Maps JavaScript API সক্রিয় করুন

ম্যাপস ডেটাসেটস এপিআই সক্রিয় করুন

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

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

ম্যাপ ইনস্ট্যানশিয়েট করার সময় 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 জাভাস্ক্রিপ্ট 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: "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.
  }
});

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

• একটি ডেটাসেট তৈরি এবং আপলোড করুন