গুগল ম্যাপের মৌলিক ধারণা
ইন্দ্র ভূষণ শুভ
একটি বেসিক গুগল ম্যাপ তৈরি করুন
এই উদাহরণটি ইংল্যান্ডের লন্ডন কেন্দ্রিক একটি গুগল ম্যাপ তৈরি করেঃ
উদাহরণ
DOCTYPE html>
<html>
<head>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
googleMap" style="width:500px;height:380px;">
</body>
</html>
নিজে চেষ্টা করুন >>
বাকি পেইজগুলো উপরের উদাহরণটিকে ধাপে ধাপে ব্যাখ্যা করবে।
১. গুগল এপিআই লোড করুন
গুগল ম্যাপের এপিআই হলো জাভাস্ক্রিপ্টের লাইব্রেরি। এটি একটি স্ক্রিপ্ট ট্যাগ দিয়ে একটি ওয়েব পেইজ যোগ করতে পারেঃ
২. ম্যাপের বৈশিষ্ট নির্ধারণ করুন
ম্যাপটি শুরু করার জন্য একটি ফাংশন তৈরি করুনঃ
function initialize() {
}
শুরুর ফাংশনটি, ম্যাপের বৈশিষ্টগুলো বর্ণনা করার জন্য একটি লক্ষ্য (mapProp) নির্ধারণ করেঃ
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
কেন্দ্র বৈশিষ্ট ম্যাপের কেন্দ্র নির্ধারণ করে। LatLng তৈরির উদ্দেশ্য একটি নির্দ্দিষ্ট বিন্দুতে কেন্দ্র নির্ধারণ করা। যাতে স্থানাঙ্ক অক্ষাংশ, দ্রাঘিমাংশ দিয়ে যায়।
জুমের বৈশিষ্ট ম্যাপের জুমের স্তর নির্ধারণ করে। জুমঃ০ একটি পৃথিবীর ম্যাপ দেখায় জুম ছাড়া। উচ্চ জুম স্তর উচ্চ রেজল্যুশনে জুম করে।
mapTypeId ম্যাপটি প্রদর্শনের ধরন নির্ধারণ করে।
নিম্নলিখিত ম্যাপগুলো সমর্থন করেঃ
রোডম্যাপ ( স্বাভাবিক, দ্বিমাত্রিক ম্যাপ )
স্যাটেলাইট ( ফটোগ্রাফিক ম্যাপ )
হাইব্রিড (ফটোগ্রাফিক ম্যাপ + শহর এবং রাস্তার নাম )
ভূখন্ড ( পাহাড়, নদী ইত্যাদি সম্বলিত ম্যাপ )
৩. ম্যাপের ধারক তৈরি করুন
ম্যাপ থাকে এমন একটি <div> উপাদান তৈরি করুন। CSS ব্যবহার করে উপাদানটির আকার তৈরি করুনঃ
উদাহরণ
googleMap" style="width:500px;height:380px;">
ম্যাপটি সবসময় এর ধারক উপাদান থেকে আকার পাবে।
৪. ম্যাপের লক্ষ্য তৈরি করুন
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
উপরের কোডটি
৫. ম্যাপ লোড করার একটি ইভেন্ট যোগ করুন
উইন্ডো লোডের initialize() ফাংশনকে চালাতে একটি DOM যোগ করা হয় (যখন পেইজটি লোড হয়)
google.maps.event.addDomListener(window, 'load', initialize);
অ্যাসিঙ্ক্রোনাস লোডিং
গুগল ম্যাপ এপিআই কে চাহিদানুযায়ী লোড করা সম্ভব।
নিচের উদাহরনটি পেইজ পুরোপুরি লোড হওয়ার পরে গুগল ম্যাপ এপআই লোড করতে window.onload ব্যবহার করেছে।
loadScript() ফাংশনটি গুগল ম্যাপ এপআই তে
উদাহরণঃ
function loadScript() {
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
নিজে চেষ্টা করুন >>
একাধিক ম্যাপ করুন
নিচের উদাহরনটি একই পেইজে চারটি ম্যাপ নির্ধারণ করে ( বিভিন্ন ধরনের চারটি ম্যাপ )
উদাহরণঃ
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
নিজে চেষ্টা করুন >>
গুগল এপিআই কী
গুগল একই দিনে কয়েক হাজারবার আপনার ওয়েবসাইটকে গুগল এপিআই তে কল করতে দিবে।
আপনি অধিক ট্রাফিকের পরিকল্পনা করলে গুগল এপিআই থেকে বিনামুল্যে কী (Key) নিতে পারেন।
বিনামুল্যে কী পেতে https://console.developers.google.com এই সাইটে যান।
যখন একটি এপিআই লোড হয়, গুগল ম্যাপ Key পরিমাপকে একটি এপিআই Key আশা করেঃ
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
