HTML5 জিওলোকেশন API ব্যবহার করে ব্যবহারকারীর লোকেশন জানা যায়। জাভাস্ক্রিপ্ট দিয়ে ল্যাটিটিউড এবং লองিটিউড ক্যাপচার করে গুগল ম্যাপসে দেখানো যায়। জিওলোকেশন কোঅর্ডিনেট ডিভাইসের ভৌগোলিক অবস্থান নির্দেশ করে।
getCurrentPosition() এবং watchPosition() মেথড কলব্যাক ফাংশন ব্যবহার করে লোকেশন ইনফরমেশন আসিঙ্ক্রোনাসলি রিটার্ন করে। এখানে getCurrentPosition() মেথড ব্যবহার করা হয়েছে।
গুগল স্ট্যাটিক ম্যাপস API ব্যবহার করতে Google Cloud Console-এ যেন ফ্রি API কী নিন এবং কোডে যোগ করুন।
উদাহরণ
নিচের কোড চালিয়ে গুগল ম্যাপসে বর্তমান লোকেশন দেখানোর উদাহরণ দেখুন:
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function showLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var latlongvalue = position.coords.latitude + "," + position.coords.longitude; var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" +latlongvalue+"&zoom=14&size=400x300&key=YOUR_API_KEY"; document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; } function errorHandler(err) { if(err.code == 1) { alert("ত্রুটি: অ্যাক্সেস অস্বীকৃত!"); } else if( err.code == 2) { alert("ত্রুটি: পজিশন অনুপলব্ধ!"); } } function getLocation(){ if(navigator.geolocation){ var options = {timeout:60000}; navigator.geolocation.getCurrentPosition (showLocation, errorHandler, options); } else{ alert("দুঃখিত, ব্রাউজার জিওলোকেশন সাপোর্ট করে না!"); } } </script> </head> <body> <div id="mapholder"></div> <form> <input type="button" onclick="getLocation();" value="লোকেশন পান"/> </form> </body> </html>
গুরুত্বপূর্ণ: কোডে YOUR_API_KEY বায়ে আপনার গুগল ম্যাপস API কী বসান। বর্তমানে গুগল ম্যাপস API ব্যবহার করতে বিলিং একাউন্ট সেটআপ লাগে। বিকল্পভাবে Leaflet.js ও OpenStreetMap ব্যবহার করে ফ্রি ম্যাপ দেখানো যায়।
