HTML5 Geolocation in Hindi – Free HTML Course
आज हम HTML Tutorial in Hindi में सीखेंगे की user का location detect करने के लिए HTML5 Geolocation ka use kaise kare
Geolocation kya hai ( What is Geolocation in HTML )
Geolocation HTML5 के सबसे अच्छे API मे से एक है जिसका उपयोग Web application के लिए users के current location की पहचान करने के लिए किया जाता है |
HTML5 का यह नया feature आपको current website visitor के अक्षांश और देशांतर निर्देशांक nevigate करने की अनुमति देता है |
इन निर्देशांकों को javascript द्वारा capture किया जाता है और server को भेजा जाता है जो website पर आपका current location दिखता है |
अधिकांश Geolocation users के स्थान की पहचान करने के लिए IP address , RFID , wifi और MAC address या GPS device जैसे Network routing addresses का उपयोग करता है |
HTML5 Geolocation Object in Hindi
HTML5 Geolocation API का उपयोग करके site visitor की current location की जानकारी प्राप्त करना बहुत ही सरल है |
Geolocation API navigation.geolocation object के साथ काम करता है | यह read-only property है जो user के current location को identify करता है और user के location के मुताबिक customized result generate करता है |
Syntax of geolocation in HTML5
geo=navigator. geolocation;Geolocation methods in HTML5
Geolocation API , Geolocation interface के तीन तरीको का उपयोग करता है जो निम्नलिखित है:
| Methods | Description |
| getCurrentPosition() | यह device या users के current location की पहचान करता है | |
| watchPosition() | जब भी device या user का location बदलता है तो यह value लौटाता है | |
| clearWatch() | यह पिछला watchPosition() call को रद्द करता है | |
HTML me user ki current location kaise pata kare
Users का current location प्राप्त करने के लिए , navigator,geolocation object की getCurrentPosition() method का उपयोग किया जाता है | यह method तीन parameters को accepts करता है:
- success: यह एक callback function है जो
GeolocationPositionobject को उसके एकमात्र input parameter के रूप में लेता है | - error: यह एक optional callback function है जो input के रूप मे
Position Errorobject को लेता है | - options: यह location प्राप्त करने के लिए विभिन्न options को परिभाषित ( define ) करता है |
निचे दिया गया example visitor के current location का देशांतर और अक्षांश लौटाएगा |
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Geolocation API</title>
</head>
<body>
<h1>Find User's Current location</h1>
<button onclick="getlocation()">Click me</button>
<div id="location"></div>
<script>
var x= document.getElementById("location");
function getlocation() {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition)
}
else
{
alert("Sorry! your browser not supporting Geolocation")
} }
function showPosition(position){
var x = "Your current location is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("location").innerHTML = x;
}
</script>
</body>
</html> चलो ऊपर दिए गए code को explain करते है |
- पहले यह check करेगा की browser Geolocation को support करेगा या नहीं |
getCurrentPosition()method के जरिये current position का पता लगाएगा |- फिर
showPosition()method के जरिये देशांतर ( longitude ) और अक्षांश ( lalitude ) की value प्राप्त करेगा | यहgetCurrentPosition()का call back method है |
Handle Error using Error Call Back function
getCurrentPosition का दूसरा parameter error Callback function है | यह एक optional parameter है , यह users का location प्राप्त करते समय error और user rejection को handle करने के लिए उपयोग किया जाता है |
Error call back function को लागू करने के लिए possible option निम्नलिखित हैं:
- Unkown random error होना |
- यदि users ने location साझा करने से इनकार किया है |
- Location information उपलब्ध नहीं है |
- Location के लिए अनुरोध ( request ) का समय समाप्त हो गया है |
Example:
function showError(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User not accepted the request for Geolocation API.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("Request for getting user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("unknown error.");
break;
}
} How to display location on Google Map in HTML5
अब तक , हमने देखा की अक्षांश और देशांतर value का उपयोग करके location कैसे दिखाया जाता है , लेकिन यह पर्याप्त नहीं है |
हम इस API के द्वारा Google Map पर Exact Location भी दिखा सकते है |
निम्नलिखित example Google map का उपयोग करके location दिखा रहा है |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show location using the Google Maps</title>
<script>
function showPosition() {
navigator.geolocation.getCurrentPosition(showMap);
}
function showMap(position) {
// Get location data
var latlong = position.coords.latitude + "," + position.coords.longitude;
// Set Google map source url
var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&zoom=16&size=400x300&output=embed";
// Create and insert Google map
document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
}
</script>
</head>
<body>
<button type="button" onclick="showPosition();">Show Current Position on Google Map</button>
<div id="embedMap">
<!--Google map will be embedded here-->
</div>
</body>
</html>ऊपर दिया गया code simply static image का उपयोग करके Google map पर location दिखयेगा , हालाँकि , आप dragging , Zoom in/out और अन्य features के साथ interactive Google map भी बना सकते है |
आइए निम्नलिखित उदहारण पर एक नजर डाले:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Find location using the Google Maps</title>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function showPosition() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap, showError);
} else {
alert("Sorry, your browser not supporting HTML5 geolocation.");
}
}
// Callback function for successful attempt
function showMap(position) {
// Getting location data
lat = position.coords.latitude;
long = position.coords.longitude;
var latlong = new google.maps.LatLng(lat, long);
var myOptions = {
center: latlong,
zoom: 16,
mapTypeControl: true,
navigationControlOptions: {
style:google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
var marker = new google.maps.Marker({ position:latlong, map:map, title:"Your current position is here!" });
}
// Callback function for failed attempt
function showError(error) {
if(error.code == 1) {
result.innerHTML = "You've not accepted to share your location.";
} else if(error.code == 2) {
result.innerHTML = "YOur network connection down or the positioning service can't be reached.";
} else if(error.code == 3) {
result.innerHTML = "The attempt timed out, so could not get the location data.";
} else {
result.innerHTML = "Due to unkown error the Geolocation has been failed.";
}
}
</script>
</head>
<body>
<button type="button" onclick="showPosition();">Find My Position on Google Map</button>
<div id="embedMap" style="width: 300px; height: 200px;">
<!--Google map will be embedded here-->
</div>
</body>
</html>Google map Javascript API के बारे में अधिक जानने के लिए कृपया निम्न यूआरएल को चेक करे :
https://developers.google.com/maps/documentation/javascript/referenceयह भी पढ़े :-