HTML5 जिओलोकेशन एपीआई आपको अपनी पसंदीदा वेबसाइटों के साथ अपना स्थान साझा करने देता है। एक जावास्क्रिप्ट आपके अक्षांश और देशांतर को कैप्चर कर सकता है और वेब सर्वर को बैकएंड पर भेजा जा सकता है और स्थानीय व्यवसायों को खोजने या मानचित्र पर अपना स्थान दिखाने जैसी फैंसी स्थान-जागरूक चीजें कर सकता है। भौगोलिक स्थान निर्देशांक डिवाइस के भौगोलिक स्थान को निर्दिष्ट करते हैं।
हम वर्तमान स्थान प्राप्त करने के लिए getCurrentPostion() विधि का उपयोग करेंगे। Google मानचित्र के साथ HTML5 जियोलोकेशन का उपयोग करके वर्तमान स्थान प्राप्त करने के लिए, आपको Google स्टेटिक मानचित्र 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="Your Location"/>
</form>
</body>
</html>