শুরু করুন

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

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

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

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

একটি নতুন মানচিত্র শৈলী তৈরি করুন

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

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

বৈশিষ্ট্য স্তর নির্বাচন করুন

গুগল এপিআই কনসোলে আপনি কোন ফিচার লেয়ারগুলো প্রদর্শন করবেন তা নির্বাচন করতে পারেন। এর মাধ্যমে নির্ধারিত হয় যে মানচিত্রে কোন ধরনের সীমানাগুলো দেখা যাবে (যেমন—এলাকা, রাজ্য ইত্যাদি)।

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

ফিচার লেয়ারগুলি পরিচালনা করতে

1. গুগল এপিআই কনসোলে, ম্যাপ স্টাইলস পৃষ্ঠায় যান ।
2. অনুরোধ করা হলে একটি প্রকল্প নির্বাচন করুন।
3. একটি মানচিত্রের শৈলী নির্বাচন করুন।
4. লেয়ার যোগ করতে বা সরাতে ফিচার লেয়ার ড্রপ-ডাউনে ক্লিক করুন।
5. আপনার পরিবর্তনগুলি সংরক্ষণ করতে এবং সেগুলিকে আপনার মানচিত্রে উপলব্ধ করতে সংরক্ষণ করুন -এ ক্লিক করুন।

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

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

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

1. নিম্নলিখিত কোড স্নিপেটে দেখানো অনুযায়ী, আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করুন:

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

মানচিত্রের সক্ষমতা পরীক্ষা করুন

সীমানার জন্য ডেটা-চালিত স্টাইলিং ব্যবহার করতে কিছু সক্ষমতার প্রয়োজন হয়, যা গুগল এপিআই কনসোলে সক্রিয় করা থাকে এবং একটি ম্যাপ আইডির সাথে যুক্ত থাকে। যেহেতু ম্যাপ আইডিগুলো ক্ষণস্থায়ী এবং পরিবর্তন সাপেক্ষ, তাই কোনো নির্দিষ্ট সক্ষমতা (যেমন ডেটা-চালিত স্টাইলিং) কল করার আগে সেটি উপলব্ধ আছে কিনা তা যাচাই করতে আপনি 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.
  }
});

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

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