HTML5 जियोलोकेशन API आपको अपनी लोकेशन वेबसाइट्स के साथ साझा करने देता है। JavaScript आपकी लैटीट्यूड और लॉन्गीट्यूड कैप्चर कर सकता है और इसे बैकएंड सर्वर पर भेजकर लोकेशन-अवेयर फीचर्स सक्षम करता है। जियोलोकेशन कोऑर्डिनेट्स डिवाइस की भौगोलिक लोकेशन निर्दिष्ट करते हैं।
हम वर्तमान लोकेशन प्राप्त करने के लिए 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 की से बदलें।
