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