Google Maps API এর মাধ্যমে আপনি মানচিত্রে মার্কার (marker) যুক্ত করতে পারেন এবং তাদের লেবেল (label) এবং অ্যানিমেশন (animation) কনফিগার করতে পারেন। এই টিউটোরিয়ালে আমরা দেখব কীভাবে একটি মার্কারের সাথে লেবেল এবং অ্যানিমেশন যুক্ত করা যায়।
Marker Label কনফিগার করা
গুগল ম্যাপে মার্কারের সাথে লেবেল (label) যোগ করতে হলে, আপনি Marker অবজেক্টের label প্রোপার্টি ব্যবহার করতে পারেন। এটি আপনার মার্কারের উপর টেক্সট দেখানোর সুযোগ দেয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি মার্কারের সাথে লেবেল যুক্ত করা হয়েছে।
কোড উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Marker Label 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%;
}
</style>
</head>
<body>
<h3>Google Map with Marker Label</h3>
<div id="map"></div>
<script>
function initMap() {
var location = {lat: 23.8103, lng: 90.4125}; // ঢাকার অবস্থান
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: location
});
// মার্কার তৈরি করা এবং লেবেল যোগ করা
var marker = new google.maps.Marker({
position: location,
map: map,
title: 'Dhaka, Bangladesh',
label: 'D' // লেবেল হিসেবে 'D' বসানো হয়েছে
});
}
</script>
</body>
</html>
ব্যাখ্যা:
label: 'D': এখানে'D'টেক্সটটি মার্কারের উপর প্রদর্শিত হবে। আপনি এটি যেকোনো টেক্সট বা সংখ্যা হিসেবে কাস্টমাইজ করতে পারেন।
Marker Animation কনফিগার করা
Google Maps API মার্কারগুলোর জন্য অ্যানিমেশন (animation) সাপোর্ট করে। আপনি মার্কারের অ্যানিমেশন টাইপ নির্ধারণ করতে পারেন, যেমন BOUNCE বা DROP।
- BOUNCE: মার্কারটি ঝাঁকানো (bouncing) হতে থাকে।
- DROP: মার্কারটি মানচিত্রের উপর ধীরে ধীরে পড়তে থাকে।
কোড উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Marker Animation 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%;
}
</style>
</head>
<body>
<h3>Google Map with Marker Animation</h3>
<div id="map"></div>
<script>
function initMap() {
var location = {lat: 23.8103, lng: 90.4125}; // ঢাকার অবস্থান
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: location
});
// মার্কার তৈরি করা এবং অ্যানিমেশন যোগ করা
var marker = new google.maps.Marker({
position: location,
map: map,
title: 'Dhaka, Bangladesh',
animation: google.maps.Animation.DROP // মার্কারটির উপর DROP অ্যানিমেশন যোগ করা
});
// মার্কারে ক্লিক করলে অ্যানিমেশন শুরু হবে
marker.addListener('click', function() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null); // যদি ইতোমধ্যে অ্যানিমেশন চলছে, তাহলে বন্ধ করে দেবে
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); // মার্কারটি বাউন্স করবে
}
});
}
</script>
</body>
</html>
ব্যাখ্যা:
animation: google.maps.Animation.DROP: এটি মার্কারের জন্য ড্রপ অ্যানিমেশন চালু করে।marker.addListener('click', function() {...}): মার্কারে ক্লিক করলে অ্যানিমেশন পরিবর্তন করা যাবে। এখানে মার্কারটি প্রথমে ড্রপ হবে এবং পরবর্তীতে বাউন্স করবে।
সারাংশ
এটি ছিল Google Maps API ব্যবহার করে একটি সিম্পল মার্কারের লেবেল এবং অ্যানিমেশন কনফিগার করার পদ্ধতি। আপনি label প্রোপার্টি ব্যবহার করে মার্কারের উপর টেক্সট যুক্ত করতে পারেন এবং animation প্রোপার্টি ব্যবহার করে মার্কারের অ্যানিমেশন কনফিগার করতে পারেন। এটি আপনার মানচিত্রের ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্সকে উন্নত করতে সহায়তা করবে।
Read more
