শুরু করুন

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

সীমানার জন্য ডেটা-ড্রিভেন স্টাইলিং ব্যবহার করতে, আপনাকে অবশ্যই একটি ম্যাপ আইডি তৈরি করতে হবে যা জাভাস্ক্রিপ্ট ভেক্টর ম্যাপ ব্যবহার করে। এরপর, আপনাকে অবশ্যই একটি নতুন ম্যাপ স্টাইল তৈরি করতে হবে, সীমানা ফিচার লেয়ার বেছে নিতে হবে এবং আপনার ম্যাপ আইডির সাথে স্টাইলটি যুক্ত করতে হবে।

ম্যাপ আইডি তৈরি করা

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

নতুন ম্যাপ স্টাইল তৈরি করুন

নতুন ম্যাপ স্টাইল তৈরি করতে, ম্যাপ স্টাইল ম্যানেজ করুন লিঙ্কে দেওয়া নির্দেশাবলী অনুসরণ করে স্টাইল তৈরি করুন এবং আপনার তৈরি করা ম্যাপ আইডির সাথে স্টাইলটি অ্যাসোসিয়েট করুন।

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

ফিচার লেয়ার বেছে নিন

Google API Console-এ আপনি কোন ফিচার লেয়ার দেখাতে চান তা বেছে নিতে পারবেন। এটি নির্ধারণ করে যে ম্যাপে কোন ধরনের সীমানা দেখানো হবে (যেমন এলাকা, রাজ্য ইত্যাদি)।

গুরুত্বপূর্ণ: সেরা পারফর্ম্যান্সের জন্য, শুধুমাত্র আপনার প্রয়োজনীয় লেয়ার বেছে নিন।

ফিচার লেয়ার ম্যানেজ করতে

1. Google API কনসোলে, ম্যাপ স্টাইল পৃষ্ঠায় যান।
2. প্রম্পট করা হলে, কোনও প্রোজেক্ট বেছে নিন।
3. ম্যাপের স্টাইল বেছে নিন।
4. লেয়ার যোগ করতে বা সরাতে ফিচার লেয়ার ড্রপ-ডাউনে ক্লিক করুন।
5. আপনার করা পরিবর্তন সেভ করতে এবং আপনার ম্যাপে সেগুলি উপলভ্য করতে সেভ করুন বিকল্পে ক্লিক করুন।

আপনার ম্যাপ ইনিশিয়ালাইজেশন কোড আপডেট করুন

এর জন্য আপনার এইমাত্র তৈরি করা ম্যাপ আইডি প্রয়োজন। এটি আপনার Maps ম্যানেজমেন্ট পৃষ্ঠায় পাওয়া যাবে।

গুরুত্বপূর্ণ: আপনার ম্যাপ আইডি এবং API কী একই Google Cloud কনসোল প্রোজেক্টের সাথে যুক্ত থাকতে হবে। একইভাবে, ম্যাপ আইডি অবশ্যই এক বা একাধিক ফিচার লেয়ার চালু থাকা ম্যাপ স্টাইলের সাথে যুক্ত হতে হবে।

1. আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে Maps JavaScript API লোড করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:

<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>

মনে রাখবেন: Maps JavaScript API অ্যাপ্লিকেশনের ডেভেলপার হিসেবে, আপনার অ্যাপ্লিকেশন স্থানীয় আইন মেনে চলছে কিনা তা যাচাই করার দায়িত্ব আপনার। যে দেশে অ্যাপ্লিকেশন হোস্ট করা হয়েছে, সেখানে সঠিক অঞ্চল লোকালাইজেশন প্রয়োগ করা হয়েছে কিনা তা যাচাই করে এটি করতে হবে।

1. mapId প্রপার্টি ব্যবহার করে ম্যাপ ইনস্ট্যান্টিয়েট করার সময় ম্যাপ আইডি প্রদান করুন। এটি সেই ম্যাপ আইডি হওয়া উচিত যা আপনি ফিচার লেয়ার চালু থাকা ম্যাপ স্টাইল ব্যবহার করে কনফিগার করেছেন।

   map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
   });

Maps JavaScript API লোড করা সম্পর্কে আরও জানুন।

ম্যাপে ফিচার লেয়ার যোগ করা

আপনার ম্যাপে ফিচার লেয়ারের রেফারেন্স পেতে, ম্যাপ শুরু হওয়ার সময় map.getFeatureLayer() কল করুন:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

ম্যাপের ক্ষমতা চেক করুন

সীমানার জন্য ডেটা-ড্রিভেন স্টাইলিংয়ের জন্য এমন ক্ষমতা প্রয়োজন যা Google API Console-এ চালু করা আছে এবং একটি ম্যাপ আইডির সাথে যুক্ত। ম্যাপ আইডি ক্ষণস্থায়ী এবং পরিবর্তনশীল হওয়ার কারণে, আপনি map.getMapCapabilities()-এ কল করে যাচাই করতে পারেন যে কোনও নির্দিষ্ট ক্ষমতা (যেমন ডেটা-ড্রিভেন স্টাইলিং) কল করার আগে উপলভ্য আছে কিনা। এই চেকটি ঐচ্ছিক।

ম্যাপের ক্ষমতা সংক্রান্ত পরিবর্তন সাবস্ক্রাইব করার জন্য লিসেনার যোগ করার পদ্ধতি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

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

পরবর্তী ধাপ

• সীমানা পলিগনের স্টাইল সেট করা
• কোরোপ্লেথ ম্যাপ তৈরি করা
• মাউস ইভেন্ট ম্যানেজ করা
• কোনও অঞ্চলের জন্য প্লেস আইডি পাওয়া
• সীমানার জন্য ডেটা-ড্রিভেন স্টাইলিং সহ Geocoding এবং Places API ব্যবহার করা