ডিফল্ট কন্ট্রোল সেটসহ একটি গুগল ম্যাপঃ
গুগল ম্যাপ - ডিফল্ট কট্রোল
যখন একটি স্ট্র্যান্ডার্ড গুগল ম্যাপ দেখানো হয় তখন তাতে যে কন্ট্রোলসেটটি ডিফল্ট হিসেবে থাকে তা নিম্নরূপঃ
জুম - একটি স্লাইডার অথবা "+/-” বাটনগুলো দেখায় যা ম্যাপের জুম লেভেল নিয়ন্ত্রন করতে ব্যবহৃত হয়
প্যান - ম্যাপকে প্যানিং অর্থাৎ ভার্টিকেল/হরাইজন্টালি নাড়াচাড়া করার জন্য একটি প্যান কন্ট্রোল দেখায়
ম্যাপটাইপ - ইউজারদের ম্যাপটাইপ (স্যটেলাইট/রোডম্যাপ) পরিবর্তন করতে দেয়
স্ট্রিট ভিউ - একটি পেজম্যান আইকন দেখায় যা ম্যাপের উপর টেনে নিয়ে স্ট্রিট ভিউ সচল করা যায়
গুগল ম্যাপ - আরও কিছু কন্ট্রোল
ডিফল্ট কন্ট্রোলের সাথে, গুগল ম্যাপে আরও কিছু কন্ট্রোল রয়েছেঃ
স্কেল - ম্যাপের স্কেল এলিমেন্ট দেখায়
রোটেট - একটি ছোট বৃত্তাকার আইকন দেখায় যা ম্যাপটিকে ঘুরাতে সাহাজ্য করে
অভারভিউ ম্যাপ - একটি থাম্বনেল অভারভিউ দেখায় যা বৃহত্তর এলাকায় বর্তমান ম্যাপের ভিউপোর্ট প্রতিফলিত করে।
আপনি যখন ম্যাপঅপশনে ম্যাপ তৈরি করবেন অথবা যখন setOptions() কে কল করার মাধ্যমে ম্যাপের অপশন পরিবর্তন করবেন তখন কোন কন্ট্রোলগুলো দেখাবেন তা নির্দিষ্ট করে দিতে পারবেন।
গুগল ম্যাপ - ডিফল্ট কন্ট্রোলগুলো ডিজেবল করা
আপনি হয়তো ডিফল্ট কন্ট্রোলগুলো বন্ধ করে দিতে চাইবেন। এটা করতে, ম্যাপ অপশন অবজক্টের ভেতরে disableDefaultUI প্রপার্টিকে ট্রু (true) করে দিনঃ
disableDefaultUI:true
গুগল ম্যাপ - সবগুলো কন্ট্রোলকে চালু করা
কিছু কন্ট্রোল ম্যাপে ডিফল্ট হিসেবে দেখায় এবং কিছু কন্ট্রোল আপনি যতক্ষণ না চালু করছেন ততক্ষণ দেখা যাবেনা। ম্যাপে কোন কন্ট্রোল যোগ করা হবে বা কোনটা লুকানো হবে তা ম্যাপ অপশন অবজেক্টে ঠিক করে দিতে হয়। কন্ট্রোলকে দৃশ্যমান করতে ট্রু সেট করতে হবে এবং লুকাতে হাইড (hide) সেট করতে হবে।
নিচের উদাহরণটি সবগুলো কন্ট্রোলকে অন করে বা দেখায়ঃ
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
গুগল ম্যাপ - কন্ট্রোলগুলো মডিফাই করা
কিছু কিছু ম্যাপ কন্ট্রোল কনফিগার করা যায়। কন্ট্রোল অপশন ফিল্ডকে নির্দিষ্ট করে দেয়ার মাধ্যমে কন্ট্রোলগুলো কনফিগার করা যায়।
উদাহরণস্বরূপ, একটি জুম কন্ট্রোলকে মডিফাই বা পরিবর্তন করার অপশনগুলো zoomControlOptions ফিল্ডকে ঠিক করে দেয়া হয়। zoomControlOptions ফিল্ড নিচের অপশনগুলো ধারণ করতে পারেঃ
google.maps.ZoomControlStyle.SMALL - একটি ছোট জুম কন্ট্রোল দেখায় (শুধু + এবং - বাটন থাকে)
google.maps.ZoomControlStyle.LARGE - স্ট্যান্ডার্ড জুম স্লাইডারকে দেখায়
google.maps.ZoomControlStyle.DEFAULT - ডিভাইস ও ম্যাপের আকার অনুযায়ী সবথেকে ভালো জুম কন্ট্রোল দেখায়
উদাহরণঃ
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
নোটঃ আপনি যদি কোন কন্ট্রোলকে মডিফাই করতে চান তাহলে প্রথমে কন্ট্রোলটিকে সচল (ট্রু হিসেবে সেট করুন) করে নিন।
আরেকটি কনফিগার করার মতো কন্ট্রোল হলো MapType কন্ট্রোল
mapTypeControlOptions ফিল্ডে এই কন্ট্রোলের অপশনগুলো কিভাবে মডাফাই করা হবে তা ঠিক করে দিতে হয়। mapTypeControlOptions ফিল্ড নিচের অপশনগুলো ধারণ করতে পারেঃ
google.maps.MapTypeControlStyle.HORIZONTAL_BAR - প্রতি ম্যাপ টাইপের জন্য একটি বাটন দেখায়
google.maps.MapTypeControlStyle.DROPDOWN_MENU - একটি ড্রপডাউন মেন্যু থেকে ম্যাপ টাইপ সিলেক্ট করার ব্যবস্থা করে
google.maps.MapTypeControlStyle.DEFAULT - স্ক্রিনের আকার অনুযায়ী ডিফল্ট ম্যাপ টাইপ দেখায়
উদাহরণঃ
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
আপনি ControlPosition প্রপার্টির মাধ্যমে একটি কন্ট্রোলের অবস্থানও ঠিক করে দিতে পারবেনঃ
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}
গুগল ম্যাপ - কাস্টম কন্ট্রোল
এমন একটি কাস্টম কন্ট্রোল তৈরি করা যাক যা আপনাকে ক্লিক করার পর সব সময় লন্ডনে নিয়ে ( যদি ম্যাপকে ড্র্যাগ করা হয়) যাবেঃ
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home'
controlUI.appendChild(controlText);
