সবাই কে সালাম...
গুগল ম্যাপ কাস্টমাইজেশন এর উপর কোন টিউন খুঁজে পেলাম না তাই ভাবলাম শুরু করে দেই (!) অনেকে আবার গুগল ম্যাপ মেকার এর সাথে গুলিয়ে ফেলতে পারেন তাই একবারে প্রথমিক থেকে আলোচনা শুরু করব ইনশাল্লাহ...
গুগল ম্যাপ কাস্টমাইজেশন শেখার আগে যা দরকারঃ
১। গুগল ম্যাপ সম্পর্কে ভাল ধরনা (ডু মারুন https://maps.google.com/maps)
২। HTML ও CSS বেসিক জানতে হবে (শিখতে চাইলে http://www.w3schools.com/ ডু মারতে পারেন)
৩। JavaScript বেসিক ধারনা থাকতে হবে (শিখতে চাইলে http://www.w3schools.com/ ডু মারতে পারেন)
এডভান্স কাজের জন্যেঃ
* PHP & mysql অবশ্যই লাগবে (শিখতে চাইলে উপরের সাইটে ডু মারুন )
গুগল ম্যাপ কেন ব্যবহার করবেন ?
গুগল ম্যাপের প্রয়োজনীয়তা বলে বুঝানো মুশকিল, যুগের চাহিদা, প্রযুক্তির ব্যবহার আর বিশ্বের সাথে তাল মেলাতে এটি একটি অনন্য প্রযুক্তি যা আপনার ওয়েব সাইট, আপ্লিকেশন এর ভাব বাড়াতে যথেষ্ট
বিশেষ করে কেনাকাটার জন্যে ওয়েব সাইট গুলোতে এটি বেশ কার্যকারী ক্রেতা এবং কিক্রেতা দের অবস্থান জানতে, এবং কমিউনিটি ওয়েব সাইট গুলতে এখন ম্যাপ বা লোকেশন এর ব্যবহার হচ্ছে (আপনার ফেইসবুক স্টাটাস দেবার সময় লক্ষ্য করুন... ওরা অবশ্য বিং এর ম্যাপ ব্যবহার করে)
এভাবেই ব্যবহার হচ্ছে সারা বিশ্ব কে কোথা থেকে কোথায় ডু মারছেন তা সহজে জানার জন্যে.... উপায় হল এই ম্যাপ'স
জেনে নেই কি কি কাজে গুগল ম্যাপ কাস্টমাইজেশন ব্যবহার করতে পারেন ?
কষ্ট করে একটু ছবি গুলো লক্ষ্য করুন ... কিছুটা সহজ হয়ে যাবে
১। আবহাওয়া এর জন্যে
২। কোন এলাকায় জনসংখ্যার ঘনত্ব কত ?
৩। কোন এলাকা কতটা দুর্নীতিগ্রস্থ
৪। কোন রাস্তায় কতটা জ্যাম বা কি অবস্থা ?
৫। আপনার রেস্টুরেন্ট এর অবস্থান কোথায় ?
৬। আপনার কোম্পানীর সার্ভিস পয়েন্ট গুলো কোথায় ?
এছাড়াও ইত্যাদি ইত্যাদি... যা খুশি কাজে লাগাতে পারেন
তাহলে এত কিছু আর আপনি পিছিয়ে থাকবেন কেন ?
তাহলে শুরু করে দেন!
১। একটা জিমেইল একাউন্ট লাগবে (একাউন্ট খুলুন এখান থেকে https://mail.google.com/mail/)
২। লগিন করুন
৩। এই লিঙ্কে(https://code.google.com/apis/console) চলে যান নিচের মত একটি পেইজ পাবেন
৪। Create project বাটন এ ক্লিক করুন নিচের মত পেইজ পাবেন
৫। বামের মেনুতে Services এ ক্লিক করুন
৬। All services এর লিস্ট থেকে Google Maps API v3 বের করুন এবং off বাটন ক্লিক করে on করে দিন
৭। টার্ম এবং শর্ত গুলো মেনে নিন
৮। নিচের মত পাবেন
৯। আবার বামের মেনুতে API Access এ ক্লিক করুন
১০। API কী কোড টি কপি করুন এবং নিচের কোড এ ব্যবহার করুন ঠিক YOUR_API_KEY লেখা টিকে রিপ্লেস করুন (অন্য কোন অক্ষর বা ফাকা স্পেস যেন না থাকে)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=<var>YOUR_API_KEY</var>&sensor=<var>false</var>">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(23.694835,90.404663),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
নিচের ছবিটি লক্ষ্য করুন
পুরো HTML কোড টি সেভ করুন HTML ফাইল হিসেবে এবং ব্রাউসারে ওপেন করুন
আশা করি গুগল ম্যাপ ছাড়া আর কিছুই পাবেন না ...
এই কাজ টি সফল ভাবে করতে পারলে আপনাকে অভিন্দন! এটি শুধু মাত্র একটি ম্যাপ যা আপনি আপনার ইচ্ছামত কাস্টমাইজ করে দেখাতে পারেন
গুগল ম্যাপের বাস্তব উদাহরন হিসেবে http://www.answersbd.com সাইট থেকে ঘুরে আসতেঁ পারেন তাহলে এর প্রয়োগ বুঝতে সুবিধা হবে, (লক্ষ্য করুন.... যে এলাকা থেকে প্রশ্ন করেছেনঃ )
ইনশাল্লাহ সময় পেলে আরো গভীরে যাবো পরবর্তী টিউনে ....
আর কোন সমস্যা, জিজ্ঞসা থাকলে কমেন্ট করে জানান
আমি Nur Hasan। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 11 টি টিউন ও 102 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
শিখে যাচ্ছি যা খুসি ভাল লাগে.... তাই ফেইসবুকে আমিঃ https://www.facebook.com/hasanrang05
@Anwar:
দুঃখিত!
এটা আমার দোষ নয়…. খুব সম্ভবত টেকটিউনসের “কোড হাইলাইটার” এর সমস্যা বা সম্পুর্ন লোড না হবার কারনে
সমস্যা হচ্ছে এই লাইনে ট্যাগ টি অটোমেটিক্যালি যোগ হয়ে গেছে যা আমার কোডে ছিল না
src=”http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false”>
দয়া করে নিচের লাইনটি দিয়ে রিপ্লেস করুন আশা করি কাজ হবার কথা….
src=”http://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&sensor=false”>
Excellent. I tried to follow your instruction but it seems that I am having problem. Can you please guide us to make it working?
@Md Alamgir: ooops Sorry for my late reply
the problem is in this line:
…………………..
src=”http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false”>
………………….
that’s not correct because tag automatically added by Techtunes Coding system…(!) or else….
replace the line like here
src=”http://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&sensor=false”>
should work!
thanks
@Md Alamgir: more details here
https://developers.google.com/maps/documentation/javascript/tutorial
![গল্পে গল্পে CSS শিখুন [পর্ব-০৪] :: CSS Child Selector শিশু সিলেক্টর!](https://dnc.techtunes.io/tDrive/tuner/2023/08/techtunes_06d20225a3bfc9e0f299e1a0697f44f1-368x207.png "গল্পে গল্পে CSS শিখুন [পর্ব-০৪] :: CSS Child Selector শিশু সিলেক্টর!")
ধন্যবাদ । জটিল টিউন । অনেক কাজে আসবে ।