Quantcast

আসুন শিখে নেই গুগল ম্যাপ কাস্টমাইজেশন – যুক্ত থাকি ভবিষ্যত প্রযুক্তির সাথে

0 0 0 0 0
11 টিউমেন্টস 5,306 দেখা প্রিয়
ওয়েব ডেভেলপমেন্ট

সবাই কে সালাম...

গুগল ম্যাপ কাস্টমাইজেশন এর উপর কোন টিউন খুঁজে পেলাম না তাই ভাবলাম শুরু করে দেই (!) অনেকে আবার গুগল ম্যাপ মেকার এর সাথে গুলিয়ে ফেলতে পারেন তাই একবারে প্রথমিক থেকে আলোচনা শুরু করব ইনশাল্লাহ...

গুগল ম্যাপ কাস্টমাইজেশন শেখার আগে যা দরকারঃ

১। গুগল ম্যাপ সম্পর্কে ভাল ধরনা (ডু মারুন 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 সাইট থেকে ঘুরে আসতেঁ পারেন তাহলে এর প্রয়োগ বুঝতে সুবিধা হবে, (লক্ষ্য করুন.... যে এলাকা থেকে প্রশ্ন করেছেনঃ )

ইনশাল্লাহ সময় পেলে আরো গভীরে যাবো পরবর্তী টিউনে ....

আর কোন সমস্যা, জিজ্ঞসা থাকলে কমেন্ট করে জানান

টিউনার সৌশল মিডিয়া
Ads by Techtunes - tAds
টিউমেন্টস টিউমেন্ট গুলো

ধন্যবাদ । জটিল টিউন । অনেক কাজে আসবে ।

somossata holo,apni kothay ta janbo kivabe?

I mean ,can i get my location

হয় না, আপনি ফাইলটা উপলোড করে দিন

    @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”>

      @RIK: @Nur Hasan: আমি উপরক্ত লাইনে var নামক ট্যাগ টির কথা বলছি….

Excellent. I tried to follow your instruction but it seems that I am having problem. Can you please guide us to make it working?

W3Schools a English e porsilam but Banglay disen apni tai subidha holo. TQ 🙂

You must be logged in to post a Tumment.