HTML5 जियोलोकेशन के साथ गूगल मैप्स का उपयोग करके वर्तमान स्थान कैसे दिखाएं?

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

जियोलोकेशन मेथड्स getCurrentPosition() और watchPosition() कॉलबैक मेथड निर्दिष्ट करते हैं जो स्थान जानकारी प्राप्त करता है। ये मेथड्स Position ऑब्जेक्ट के साथ एसिंक्रोनसली कॉल किए जाते हैं जो पूरी स्थान जानकारी संग्रहीत करता है।

हम 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+"&amp;zoom=14&amp;size=400x300&amp;key             =AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";             document.getElementById("mapholder").innerHTML =             "<img src='"+img_url+"'>";          }          function errorHandler(err) {             if(err.code == 1) {                alert("त्रुटि: पहुंच अस्वीकृत!");             } else if( err.code == 2) {                alert("त्रुटि: स्थान अनुपलब्ध!");             }          }          function getLocation(){             if(navigator.geolocation){                // टाइमआउट 60000 मिलीसेकंड (60 सेकंड) पर                var options = {timeout:60000};                navigator.geolocation.getCurrentPosition                (showLocation, errorHandler, options);             } else{                alert("क्षमा करें, ब्राउज़र जियोलोकेशन का समर्थन नहीं करता!");             }          }       </script>    </head>    <body>       <div id="mapholder"></div>       <form>          <input type="button" onclick="getLocation();" value="स्थान प्राप्त करें"/>       </form>    </body> </html>

महत्वपूर्ण: API कुंजी प्रतिबंधित करें (HTTP रेफरर, IP)। उत्पादन में कुंजी उजागर न करें।