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

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ওভারভিউ

Maps JavaScript API-এর WebGL-চালিত ফিচারগুলো আপনাকে টিল্ট ও রোটেশন নিয়ন্ত্রণ করতে, সরাসরি ম্যাপে 3D অবজেক্ট যোগ করতে এবং আরও অনেক কিছু করতে দেয়। নিম্নলিখিত ফিচারগুলো অন্তর্ভুক্ত রয়েছে:

WebGL ওভারলে ভিউ আপনাকে আপনার ম্যাপে কাস্টম ২ডি ও ৩ডি গ্রাফিক্স এবং অ্যানিমেটেড কন্টেন্ট যোগ করার সুযোগ দেয়।
এখন প্রোগ্রামগতভাবে এবং মাউস ও কিবোর্ড জেসচার ব্যবহার করে টিল্ট ও হেডিং সামঞ্জস্য করা যায়।
map.moveCamera() আপনাকে একই সাথে ক্যামেরার একাধিক বৈশিষ্ট্য পরিবর্তন করার সুযোগ দেয়।
জুম এখন ভগ্নাংশ মান সমর্থন করে।

শুরু করুন

WebGL-এর নতুন বৈশিষ্ট্যগুলো ব্যবহার করার জন্য আপনাকে অবশ্যই একটি ভেক্টর ম্যাপ ব্যবহার করতে হবে। এই অংশে তা দেখানো হয়েছে।

`renderingType` বিকল্পটি নির্দিষ্ট করুন

আপনার ম্যাপের জন্য রাস্টার অথবা ভেক্টর রেন্ডারিং টাইপ নির্দিষ্ট করতে renderingType অপশনটি ব্যবহার করুন (কোনো ম্যাপ আইডি প্রয়োজন নেই):

RenderingType লাইব্রেরিটি লোড করুন; এটি Maps লাইব্রেরি লোড করার সময় করা যেতে পারে:
```
const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
```
ম্যাপটি ইনিশিয়ালাইজ করার সময়, RenderingType.VECTOR অথবা RenderingType.RASTER নির্দিষ্ট করতে renderingType অপশনটি ব্যবহার করুন:
```
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);
```

renderingType অপশনটি ম্যাপ আইডি কনফিগার করার মাধ্যমে করা যেকোনো রেন্ডারিং টাইপ সেটিংসকে অগ্রাহ্য করে।

টিল্ট এবং রোটেশন সক্রিয় করতে, tiltInteractionEnabled ম্যাপ অপশনটিকে true-তে সেট করুন অথবা map.setTiltInteractionEnabled কল করুন।
প্যানিং চালু করতে, headingInteractionEnabled ম্যাপ অপশনটিকে true তে সেট করুন অথবা map.setHeadingInteractionEnabled কল করুন।

রেন্ডারিং টাইপ সেট করতে একটি ম্যাপ আইডি ব্যবহার করুন

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

ভেক্টর ম্যাপ আইডি তৈরি করুন

এরপর, আপনার তৈরি করা ম্যাপ আইডি দিয়ে ম্যাপ ইনিশিয়ালাইজেশন কোডটি আপডেট করুন। আপনি ম্যাপস ম্যানেজমেন্ট পেজে আপনার ম্যাপ আইডিগুলো খুঁজে পাবেন। এখানে দেখানো পদ্ধতি অনুযায়ী, mapId প্রপার্টি ব্যবহার করে ম্যাপ ইনস্ট্যানশিয়েট করার সময় একটি ম্যাপ আইডি প্রদান করুন:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

`<gmp-map>` এলিমেন্টটি ব্যবহার করুন

<gmp-map> এলিমেন্ট ব্যবহার করলে ভেক্টর ম্যাপ, টিল্ট এবং হেডিং ডিফল্টরূপে সক্রিয় থাকে, যা আপনাকে HTML ব্যবহার করে আপনার পেজে একটি ম্যাপ যোগ করতে দেয়। আরও জানুন ।

উদাহরণ

এই বৈশিষ্ট্যগুলো দেখানোর জন্য উদাহরণ দেওয়া হয়েছে: