ভূ-অবস্থান: মানচিত্রে ব্যবহারকারী বা ডিভাইসের অবস্থান প্রদর্শন করা হচ্ছে

ওভারভিউ

এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে ম্যাপ জাভাস্ক্রিপ্ট API সহ আপনার ব্রাউজারের HTML5 জিওলোকেশন ফিচার ব্যবহার করে Google মানচিত্রে একটি ডিভাইসের ভৌগলিক অবস্থান প্রদর্শন করতে হয়। ভৌগলিক অবস্থান কেবল তখনই প্রদর্শিত হবে যদি ব্যবহারকারী অবস্থান ভাগ করে নেওয়ার অনুমতি দেয়৷

ব্যবহারকারী যখন ভৌগলিক অবস্থানের অনুরোধটি ট্রিগার করেন, তখন তারা ডিভাইসের অবস্থানের ডেটা অ্যাক্সেস করার জন্য সম্মতির জন্য ব্রাউজার থেকে একটি প্রম্পট পাবেন। অনুরোধটি ব্যর্থ হলে, এটি হতে পারে কারণ অবস্থানের অনুমতিগুলি অস্বীকার করা হয়েছিল, বা ডিভাইসটি তার অবস্থান নির্ধারণ করতে পারেনি৷ এই বৈশিষ্ট্যটি শুধুমাত্র নিরাপদ প্রেক্ষাপটে (HTTPS), কিছু বা সমস্ত সমর্থনকারী ব্রাউজারে উপলব্ধ।

নীচে একটি মানচিত্র রয়েছে যা ব্যবহারকারীর ডিভাইসের বর্তমান অবস্থান সনাক্ত করতে পারে৷

নীচের নমুনাটি এই মানচিত্রটি তৈরি করতে আপনার প্রয়োজনীয় পুরো কোডটি দেখায়।

টাইপস্ক্রিপ্ট

// 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
উদাহরণ দেখুন

নমুনা চেষ্টা করুন

ভূ-অবস্থান কি?

ভূ-অবস্থান বলতে বিভিন্ন তথ্য সংগ্রহের পদ্ধতি ব্যবহার করে একটি কম্পিউটিং ডিভাইসের ভৌগলিক অবস্থানের সনাক্তকরণকে বোঝায়। সাধারণত, বেশিরভাগ ভূ-অবস্থান পরিষেবাগুলি এই অবস্থান নির্ধারণ করতে নেটওয়ার্ক রাউটিং ঠিকানা বা অভ্যন্তরীণ GPS চিপ ব্যবহার করে। জিওলোকেশন হল একটি ডিভাইস-নির্দিষ্ট API। এর মানে হল ওয়েব অ্যাপ্লিকেশনের মাধ্যমে এটি ব্যবহার করার জন্য ব্রাউজার বা ডিভাইসগুলিকে অবশ্যই ভৌগলিক অবস্থান সমর্থন করতে হবে৷

W3C জিওলোকেশন স্ট্যান্ডার্ড

যে অ্যাপ্লিকেশনগুলি ভৌগলিক অবস্থান সম্পাদন করতে চায় তাদের অবশ্যই W3C ভূ-অবস্থান মানকে সমর্থন করতে হবে৷ লক্ষ্য করুন যে উপরের নমুনা কোডটি W3C navigator.geolocation API এর মাধ্যমে ডিভাইসের অবস্থান নির্ধারণ করে।

কখনও কখনও ওয়েবসাইটগুলি একটি ডিভাইসের অবস্থান সনাক্ত করতে IP ঠিকানা ব্যবহার করে, তবে এটি শুধুমাত্র সেই অবস্থানের একটি মোটামুটি অনুমান প্রদান করতে পারে। W3C-স্ট্যান্ডার্ড এপিআই হল সবচেয়ে সম্পূর্ণ-সমর্থিত এবং সবচেয়ে নির্ভুল, তাই অন্যান্য ভূ-অবস্থান পদ্ধতির তুলনায় তাদের অগ্রাধিকার দেওয়া উচিত।