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

खास जानकारी

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

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

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

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

TypeScript

// 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

JavaScript

// 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 API की मदद से डिवाइस की जगह की जानकारी तय करता है.

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