Maps JavaScript API-এর জন্য WebGL-চালিত ফিচার আপনাকে টিল্ট ও রোটেশন কন্ট্রোল করতে, সরাসরি ম্যাপে 3D অবজেক্ট যোগ করতে এবং আরও অনেক কিছু করতে দেয়। নিম্নলিখিত ফিচার অন্তর্ভুক্ত করা হয়েছে:
- WebGL ওভারলে ভিউ আপনাকে ম্যাপে কাস্টম 2D ও 3D গ্রাফিক্স এবং অ্যানিমেটেড কন্টেন্ট যোগ করতে দেয়।
- টিল্ট ও হেডিং এখন প্রোগ্রাম্যাটিক্যালি এবং মাউস ও কীবোর্ড জেসচার ব্যবহার করে অ্যাডজাস্ট করা যাবে।
- map.moveCamera() আপনাকে একসাথে একাধিক ক্যামেরা প্রপার্টি পরিবর্তন করতে দেয়।
- Zoom এখন ভগ্নাংশ মান ব্যবহার করা যায়।
শুরু করুন
নতুন WebGL ফিচার ব্যবহার করতে, আপনাকে অবশ্যই ভেক্টর ম্যাপ ব্যবহার করতে হবে। এই বিভাগে দেখানো হয়েছে কীভাবে।
renderingType বিকল্পটি নির্দিষ্ট করুন
আপনার ম্যাপের জন্য রাস্টার বা ভেক্টর
রেণ্ডারিংয়ের ধরন নির্দিষ্ট করতে renderingType বিকল্প ব্যবহার করুন (কোনও ম্যাপ আইডি প্রয়োজন নেই):
RenderingTypeলাইব্রেরি লোড করুন; Maps লাইব্রেরি লোড করার সময় এটি করা যেতে পারে:const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;ম্যাপ ইনিশিয়ালাইজ করার সময়,
renderingTypeবিকল্প ব্যবহার করেRenderingType.VECTORঅথবাRenderingType.RASTERনির্দিষ্ট করুন:map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, renderingType: RenderingType.VECTOR, } );
renderingType বিকল্পটি ম্যাপ আইডি কনফিগার করে তৈরি করা যেকোনও রেন্ডারিং
টাইপ সেটিংসকে ওভাররাইড করে।
- টিল্ট ও রোটেশন চালু করতে,
tiltInteractionEnabledম্যাপ বিকল্পটি true-তে সেট করুন অথবাmap.setTiltInteractionEnabledকল করুন। - প্যানিং চালু করতে,
headingInteractionEnabledম্যাপ বিকল্পটিtrue-এ সেট করুন অথবাmap.setHeadingInteractionEnabled-এ কল করুন।
রেন্ডারিংয়ের ধরন সেট করতে ম্যাপ আইডি ব্যবহার করুন
এছাড়াও, আপনি ম্যাপ আইডি ব্যবহার করে রেন্ডারিংয়ের ধরন নির্দিষ্ট করতে পারবেন। নতুন ম্যাপ আইডি তৈরি করতে, ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং ব্যবহার করা - ম্যাপ আইডি পান লিঙ্কে দেওয়া ধাপগুলি অনুসরণ করুন। ম্যাপের ধরন JavaScript হিসেবে সেট করতে ভুলবেন না এবং ভেক্টর বিকল্প বেছে নিন। ম্যাপে টিল্ট ও রোটেশন চালু করতে টিল্ট বা রোটেশন বিকল্পে টিকচিহ্ন দিন। এটি করলে আপনি প্রোগ্রাম্যাটিক্যালি এইসব ভ্যালু অ্যাডজাস্ট করতে পারবেন এবং ব্যবহারকারীরাও সরাসরি ম্যাপে টিল্ট ও হেডিং অ্যাডজাস্ট করতে পারবেন। টিল্ট বা হেডিং ব্যবহার করলে আপনার অ্যাপে কোনও বিরূপ প্রভাব পড়লে, টিল্ট ও ঘোরানো বিকল্প থেকে টিকচিহ্ন সরিয়ে দিন যাতে ব্যবহারকারীরা টিল্ট ও ঘোরানো অ্যাডজাস্ট করতে না পারেন।
এরপর, আপনার তৈরি করা ম্যাপ আইডির সাথে ম্যাপ ইনিশিয়ালাইজেশন কোড আপডেট করুন। আপনি
Maps
ম্যানেজমেন্ট পৃষ্ঠা থেকে আপনার ম্যাপ আইডি খুঁজে পেতে পারেন। আপনি যখন এখানে দেখানো
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 ব্যবহার করে পৃষ্ঠায় ম্যাপ যোগ করতে দেয়। আরও জানুন।
উদাহরণ
এইসব ফিচার কীভাবে কাজ করে তা বোঝানোর জন্য উদাহরণ দেওয়া হয়েছে: