HTML5 জিওলোকেশন API আপনাকে আপনার লোকেশন প্রিয় ওয়েবসাইটের সাথে শেয়ার করতে দেয়। জাভাস্ক্রিপ্ট আপনার অক্ষাংশ ও দ্রাঘিমাংশ বের করে ব্যাকএন্ড সার্ভারে পাঠাতে পারে, যাতে লোকেশন-ভিত্তিক সেবা যেমন নিকটবর্তী ব্যবসা খুঁজে বের করা বা মানচিত্রে লোকেশন দেখানো সম্ভব হয়। জিওলোকেশন কোঅর্ডিনেট ডিভাইসের ভৌগোলিক অবস্থান নির্দেশ করে।
বর্তমান লোকেশন পেতে getCurrentPosition() মেথড ব্যবহার করা হয়। HTML5 জিওলোকেশন গুগল ম্যাপসের সাথে ব্যবহার করতে গুগল স্ট্যাটিক ম্যাপস API-এর জন্য একটি API কী সেট করতে হয়।
https://console.developers.google.com-এ যাইয়ে গুগল ম্যাপের জন্য ফ্রি API কী নিন। এই কীটি কোডে যোগ করুন।
উদাহরণ
নিচের কোডটি চালিয়ে 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=YOUR_API_KEY";
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) {
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="Your Location"/>
</form>
</body>
</html>
দ্রষ্টব্য: YOUR_API_KEY এর জায়গায় আপনার গুগল ম্যাপস API কীটি বসান।
