Google Maps API ব্যবহার করে আপনি Custom Panoramas (কাস্টম প্যানোরামাস) তৈরি এবং পরিচালনা করতে পারেন। প্যানোরামা হলো 360° ভিউ, যা ব্যবহারকারীকে একটি নির্দিষ্ট জায়গার চারপাশের দৃশ্য দেখানোর সুযোগ দেয়। এই প্যানোরামাগুলি সাধারণত Street View ফিচার থেকে আসে, তবে আপনি আপনার নিজের কাস্টম প্যানোরামাসও তৈরি করতে পারেন, যা আপনার ওয়েবসাইট বা অ্যাপে এক্সটেন্ডেড ভিউ তৈরি করতে সাহায্য করে।
এই গাইডে, আপনি শিখবেন কিভাবে Custom Panoramas তৈরি এবং পরিচালনা করতে হয়।
Custom Panoramas তৈরি এবং পরিচালনা করার জন্য পদক্ষেপ
- Google Maps API Integration: প্রথমে, আপনাকে Google Maps API কনফিগার করতে হবে, বিশেষত Street View API, যাতে আপনি কাস্টম প্যানোরামাগুলি প্রদর্শন করতে পারেন।
HTML এবং JavaScript কোড তৈরি করা:
নিচে একটি উদাহরণ দেওয়া হলো, যেখানে কাস্টম প্যানোরামা তৈরি করা হয়েছে এবং Street View এর মধ্যে একটি নির্দিষ্ট স্থান প্রদর্শন করা হয়েছে।
<!DOCTYPE html> <html> <head> <title>Custom Panorama Example</title> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <style> #map { height: 500px; width: 100%; } #pano { height: 400px; width: 100%; } </style> </head> <body> <h3>Custom Panorama Example</h3> <div id="map"></div> <div id="pano"></div> <script> var map, panorama; function initMap() { // মানচিত্র তৈরি map = new google.maps.Map(document.getElementById('map'), { center: {lat: 23.8103, lng: 90.4125}, // ঢাকার কেন্দ্র zoom: 14 }); // Street View প্যানোরামা তৈরি panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 23.8103, lng: 90.4125}, // ঢাকার লোকেশন pov: {heading: 165, pitch: 0}, // দৃশ্যের দৃষ্টিকোণ (angle) zoom: 1 // প্যানোরামার জুম লেভেল }); // মানচিত্রে প্যানোরামা যুক্ত করা map.setStreetView(panorama); } </script> </body> </html>
কোডের ব্যাখ্যা:
- Google Maps API Integration:
<script>ট্যাগের মাধ্যমে Google Maps API এবং Street View Panorma যোগ করা হয়েছে।YOUR_API_KEYজায়গায় আপনার API Key বসাতে হবে।
- Street View Panorama Object:
google.maps.StreetViewPanoramaব্যবহার করে একটি Street View প্যানোরামা তৈরি করা হয়েছে।- position: এটি প্যানোরামার জন্য কেন্দ্রীয় স্থান নির্ধারণ করে। এখানে ঢাকার অবস্থান দেওয়া হয়েছে।
- pov (point of view): এটি প্যানোরামার দৃষ্টিকোণ নির্ধারণ করে।
headingহলো দিক (degree), এবংpitchহলো অনুভূমিক অবস্থান (angle)। - zoom: প্যানোরামার জুম লেভেল নির্ধারণ করে।
- Map and Panorama Integration:
map.setStreetView(panorama)ব্যবহার করে মানচিত্রে প্যানোরামা যুক্ত করা হয়েছে।
Custom Panorama ব্যবহার এবং কাস্টমাইজেশন
Custom Image Panoramas (কাস্টম ইমেজ প্যানোরামা): আপনি যদি Google Maps API ব্যবহার না করে নিজের 360° প্যানোরামা ইমেজ ব্যবহার করতে চান, তবে আপনার ইমেজটি প্রথমে 360° ইমেজ হিসেবে তৈরি করতে হবে এবং তারপর তা Google Maps Street View API এর মধ্যে ইনটিগ্রেট করতে হবে।
উদাহরণস্বরূপ:
var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { pano: 'YOUR_CUSTOM_PANORAMA_ID', // আপনার কাস্টম প্যানোরামার আইডি position: {lat: 23.8103, lng: 90.4125}, // প্যানোরামার অবস্থান pov: {heading: 165, pitch: 0}, // দৃষ্টিকোণ zoom: 1 });- প্যানোরামার কাস্টমাইজেশন:
- pov (point of view) এর মাধ্যমে আপনি প্যানোরামার দৃষ্টিকোণ পরিবর্তন করতে পারেন।
- zoom এর মাধ্যমে প্যানোরামার জুম ইন বা আউট করতে পারেন।
- position পরিবর্তন করে আপনি প্যানোরামার অবস্থান চিহ্নিত করতে পারেন।
সারাংশ
Google Maps API ব্যবহার করে আপনি সহজেই Custom Panoramas তৈরি এবং পরিচালনা করতে পারেন। Street View প্যানোরামা ব্যবহার করে নির্দিষ্ট স্থানের 360° দৃশ্য প্রদর্শন করতে সক্ষম হবেন, এবং কাস্টম ইমেজ প্যানোরামাও অন্তর্ভুক্ত করতে পারবেন। এটি আপনার ওয়েবসাইট বা অ্যাপে ভিজ্যুয়াল ইন্টারঅ্যাকশন বাড়ানোর জন্য অত্যন্ত কার্যকরী একটি ফিচার।
Read more
