Google Maps API ব্যবহার করে আপনি মানচিত্রে বিভিন্ন মার্কারের সাথে Info Windows (ইনফো উইন্ডোজ) যোগ করতে পারেন। Info Window হলো একটি পপআপ উইন্ডো যা মার্কারের উপর ক্লিক করার পর প্রদর্শিত হয় এবং এটি স্থান বা জায়গার সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে সহায়তা করে। নিচে আপনি কীভাবে Google Maps API ব্যবহার করে Info Window তৈরি এবং প্রদর্শন করতে পারেন, তা জানাব।
Info Window তৈরি এবং প্রদর্শন করার জন্য পদক্ষেপ
HTML এবং JavaScript কোড তৈরি করা: প্রথমে, HTML ফাইল তৈরি করতে হবে যেখানে Google Maps API ইন্টিগ্রেট করা হবে এবং Info Window প্রদর্শন করা হবে।
<!DOCTYPE html> <html> <head> <title>Info Window 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 Info Window</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' }); // InfoWindow তৈরি করা var infowindow = new google.maps.InfoWindow({ content: '<div><h3>Dhaka</h3><p>Capital of Bangladesh</p></div>' }); // মার্কারে ক্লিক করার পর InfoWindow প্রদর্শন marker.addListener('click', function() { infowindow.open(map, marker); }); } </script> </body> </html>- কোডের ব্যাখ্যা:
- Script Tag:
<script>ট্যাগের মাধ্যমে Google Maps API যোগ করা হয়েছে। এখানেYOUR_API_KEYএর জায়গায় আপনার API Key বসাতে হবে। - initMap Function: এটি মানচিত্র ইনিশিয়ালাইজ করার জন্য ব্যবহৃত ফাংশন। এখানে ঢাকা (Dhaka) শহরের অবস্থান দিয়ে মানচিত্রের কেন্দ্র নির্ধারণ করা হয়েছে।
- Marker: একটি মার্কার তৈরি করা হয়েছে ঢাকার অবস্থানে, যা মানচিত্রে স্থাপন করা হয়েছে।
- InfoWindow:
google.maps.InfoWindowব্যবহার করে Info Window তৈরি করা হয়েছে। এর মধ্যে HTML কনটেন্ট যেমন শিরোনাম (h3) এবং বিবরণ (p) যোগ করা হয়েছে। এটি তখন প্রদর্শিত হবে যখন ব্যবহারকারী মার্কারের উপর ক্লিক করবেন। - Listener:
addListenerফাংশন ব্যবহার করে মার্কারের উপর ক্লিক করার পর InfoWindow প্রদর্শিত হবে।
- Script Tag:
- ফাইল রান করা: কোডটি একটি HTML ফাইলে সেভ করুন এবং ব্রাউজারে ওপেন করুন। আপনি যখন মার্কারে ক্লিক করবেন, তখন InfoWindow প্রদর্শিত হবে।
সারাংশ
এটি ছিল Google Maps API ব্যবহার করে Info Window তৈরি এবং প্রদর্শনের প্রাথমিক গাইড। Info Windows ব্যবহারকারীদের মানচিত্রের বিভিন্ন স্থানের উপর অতিরিক্ত তথ্য প্রদর্শন করার একটি চমৎকার উপায়। এই টিউটোরিয়ালের মাধ্যমে আপনি সহজেই আপনার ওয়েবসাইট বা অ্যাপে Google Maps এর উপর ক্লিকযোগ্য তথ্য উইন্ডো প্রদর্শন করতে পারবেন।
Read more
