जियोलोकेशन: Maps पर उपयोगकर्ता या डिवाइस की स्थिति दिखाना

खास जानकारी

इस ट्यूटोरियल में, Maps JavaScript API के साथ-साथ अपने ब्राउज़र की HTML5 जियोलोकेशन सुविधा का इस्तेमाल करके, Google Maps पर किसी डिवाइस की जगह की जानकारी दिखाने का तरीका बताया गया है. भौगोलिक जगह सिर्फ़ तब दिखेगी, जब उपयोगकर्ता ने जगह की जानकारी शेयर करने की अनुमति दी हो.

जब उपयोगकर्ता भौगोलिक स्थान का अनुरोध ट्रिगर करता है, तब उसे डिवाइस की जगह की जानकारी का डेटा ऐक्सेस करने की सहमति पाने के लिए, ब्राउज़र से एक प्रॉम्प्ट मिलेगा. अगर अनुरोध पूरा नहीं होता है, तो हो सकता है कि जगह की जानकारी की अनुमतियां न दी गई हों या डिवाइस इसकी जगह का पता न लगा पाए. यह सुविधा सिर्फ़ सुरक्षित कॉन्टेक्स्ट (एचटीटीपीएस) में उपलब्ध है. यह कुछ या इसके साथ काम करने वाले सभी ब्राउज़र में उपलब्ध है.

नीचे एक मैप दिया गया है, जिससे उपयोगकर्ता के डिवाइस की मौजूदा जगह की पहचान की जा सकती है.

नीचे दिया गया नमूना वह पूरा कोड दिखाता है, जिसकी ज़रूरत आपको यह मैप बनाने के लिए होती है.

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);

  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position: GeolocationPosition) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter()!);
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter()!);
    }
  });
}

function handleLocationError(
  browserHasGeolocation: boolean,
  infoWindow: google.maps.InfoWindow,
  pos: google.maps.LatLng
) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        },
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation.",
  );
  infoWindow.open(map);
}

window.initMap = initMap;
index.js

भौगोलिक-स्थान क्या है?

जियोलोकेशन का मतलब है, डेटा इकट्ठा करने के अलग-अलग तरीकों का इस्तेमाल करके, किसी कंप्यूटिंग डिवाइस की भौगोलिक जगह की पहचान करना. आम तौर पर, जियोलोकेशन की ज़्यादातर सेवाएं इस जगह का पता लगाने के लिए नेटवर्क रूटिंग पते या इंटरनल जीपीएस चिप का इस्तेमाल करती हैं. जगह की जानकारी की सुविधा, डिवाइस के लिए खास तौर पर बना एपीआई है. इसका मतलब है कि ब्राउज़र या डिवाइस में जियोलोकेशन की सुविधा होनी चाहिए, ताकि वेब ऐप्लिकेशन के ज़रिए उसका इस्तेमाल किया जा सके.

W3C जियोलोकेशन स्टैंडर्ड

जो ऐप्लिकेशन भौगोलिक स्थान लागू करना चाहते हैं उन्हें W3C जियोलोकेशन स्टैंडर्ड के साथ काम करना चाहिए. ध्यान दें कि ऊपर दिया गया सैंपल कोड, W3C navigator.geolocation एपीआई की मदद से डिवाइस की जगह की जानकारी तय करता है.

कभी-कभी वेबसाइटें किसी डिवाइस की जगह का पता लगाने के लिए आईपी पतों का इस्तेमाल करती हैं. हालांकि, इससे उस डिवाइस की जगह का सिर्फ़ अनुमानित अनुमान मिल सकता है. W3C-स्टैंडर्ड एपीआई सबसे सही और पूरी तरह से काम करने वाले एपीआई होते हैं. इसलिए, उन्हें भौगोलिक स्थान के दूसरे तरीकों पर प्राथमिकता दी जानी चाहिए.