HTML5 জিওলোকেশন API আপনাকে আপনার পছন্দের ওয়েবসাইটগুলির সাথে আপনার অবস্থান শেয়ার করতে দেয়৷ একটি জাভাস্ক্রিপ্ট আপনার অক্ষাংশ এবং দ্রাঘিমাংশ ক্যাপচার করতে পারে এবং ব্যাকএন্ড ওয়েব সার্ভারে পাঠানো যেতে পারে এবং স্থানীয় ব্যবসা খোঁজা বা মানচিত্রে আপনার অবস্থান দেখানোর মতো অভিনব অবস্থান-সচেতন জিনিসগুলি করতে পারে৷ জিওলোকেশন কোঅর্ডিনেট ডিভাইসের ভৌগলিক অবস্থান নির্দিষ্ট করে।
ভৌগলিক অবস্থান পদ্ধতি getCurrentPosition() এবং getPositionUsingMethodName() কলব্যাক পদ্ধতি নির্দিষ্ট করে যা অবস্থানের তথ্য পুনরুদ্ধার করে। এই পদ্ধতিগুলিকে একটি বস্তুর অবস্থানের সাথে অ্যাসিঙ্ক্রোনাস বলা হয় যা সম্পূর্ণ অবস্থানের তথ্য সংরক্ষণ করে।
আমরা getCurrentPostion() পদ্ধতি ব্যবহার করব। Google মানচিত্রের সাথে HTML5 জিওলোকেশন ব্যবহার করে বর্তমান অবস্থান পেতে, আপনাকে Google Static Maps API-এর জন্য একটি API কী সেট করতে হবে।
https://console.developers.google.com-এ যান এবং Google মানচিত্রের জন্য একটি বিনামূল্যের API কী পান৷ এটির সাথে জিওলোকেশন কাজ করতে কোডটিতে এই কী যোগ করুন।
আপনি Google মানচিত্রের সাথে HTML5 জিওলোকেশন ব্যবহার করে বর্তমান অবস্থান দেখানোর জন্য নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন
উদাহরণ
<!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
=AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";
document.getElementById("mapholder").innerHTML =
"<img src='"+img_url+"'>";
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
} else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition
(showLocation, errorHandler, options);
} else{
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<div id="mapholder"></div>
<form>
<input type="button" onclick="getLocation();" value="Get Location"/>
</form>
</body>
</html> 