গুগল ম্যাপস (Google Maps) ব্যবহার করে একটি সিম্পল মানচিত্র তৈরি করা খুবই সহজ এবং এটি ওয়েব ডেভেলপমেন্টে ব্যবহৃত একটি গুরুত্বপূর্ণ টুল। Google Maps API ব্যবহার করে আপনার ওয়েবসাইটে একটি বেসিক মানচিত্র (basic map) যুক্ত করা যেতে পারে। নিচে Google Maps API ব্যবহার করে একটি সিম্পল মানচিত্র তৈরি করার জন্য প্রয়োজনীয় স্টেপ-by-স্টেপ গাইড দেওয়া হলো।
প্রথম Simple Map তৈরি করার জন্য প্রয়োজনীয় পদক্ষেপ
- Google Maps API Key তৈরি করা: গুগল ম্যাপস API ব্যবহার করার জন্য প্রথমেই আপনাকে গুগল ক্লাউড (Google Cloud) কনসোলে গিয়ে একটি API key তৈরি করতে হবে।
- Google Cloud Console এ যান: https://console.cloud.google.com/
- একটি নতুন প্রোজেক্ট তৈরি করুন বা একটি পুরনো প্রোজেক্ট নির্বাচন করুন।
- APIs & Services এর মধ্যে Library এ গিয়ে Google Maps JavaScript API নির্বাচন করুন এবং এটি এনেবল করুন।
- এরপর Credentials সেকশনে গিয়ে একটি নতুন API Key তৈরি করুন।
HTML ফাইল তৈরি করা: আপনি যে HTML ফাইলটি তৈরি করবেন, তার মধ্যে একটি
<div>ট্যাগ থাকতে হবে যেখানে মানচিত্রটি দেখানো হবে। নিচে একটি সিম্পল HTML ফাইলের উদাহরণ দেওয়া হলো।<!DOCTYPE html> <html> <head> <title>Simple Google Map</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 Example</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, // মানচিত্রের কেন্দ্র }); // মানচিত্রে একটি মার্কার (marker) যোগ করা var marker = new google.maps.Marker({ position: location, map: map, title: 'Dhaka, Bangladesh' }); } </script> </body> </html>- কোডের ব্যাখ্যা:
- Script Tag: এখানে
<script>ট্যাগের মাধ্যমে Google Maps JavaScript API যোগ করা হয়েছে।YOUR_API_KEYএর জায়গায় আপনার তৈরি করা API Key বসাতে হবে। - Map Container:
<div id="map">ট্যাগটি মানচিত্র প্রদর্শনের জন্য ব্যবহৃত হচ্ছে। আপনি এর সাইজ কাস্টমাইজ করতে পারেন। - initMap Function: এটি Google Maps এর মানচিত্র ইনিশিয়ালাইজ করার জন্য ব্যবহৃত একটি ফাংশন। এখানে ঢাকার (Dhaka) অবস্থান দিয়ে মানচিত্রের কেন্দ্র নির্ধারণ করা হয়েছে।
- Marker: একটি মার্কার যুক্ত করা হয়েছে মানচিত্রে ঢাকার অবস্থান চিহ্নিত করার জন্য।
- Script Tag: এখানে
- ফাইল রান করা: কোডটি একটি HTML ফাইলে সেভ করুন এবং ওয়েব ব্রাউজারে ওপেন করুন। আপনি আপনার ওয়েবসাইটে এটি ইন্টিগ্রেট করতে পারেন অথবা সরাসরি একটি সিম্পল ওয়েব পেজ তৈরি করতে পারেন।
সারাংশ
এটি ছিল Google Maps API ব্যবহার করে একটি সিম্পল মানচিত্র তৈরি করার প্রাথমিক গাইড। Google Maps API এর সাহায্যে আপনি আপনার ওয়েবসাইটে অত্যন্ত সহজে এবং দ্রুত একটি ইন্টারেকটিভ মানচিত্র ইন্টিগ্রেট করতে পারবেন। এর মাধ্যমে ব্যবহারকারীরা বিভিন্ন স্থানে নেভিগেট করতে পারবেন এবং আরও উন্নত ফিচার যোগ করা যাবে পরবর্তী ধাপে।
Read more
