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

ওভারভিউ

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

নীচে একটি মানচিত্র রয়েছে যা আপনার বর্তমান অবস্থান সনাক্ত করতে পারে।

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

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

// 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 প্রপার্টির মাধ্যমে ব্যবহারকারীর অবস্থান নির্ধারণ করে।

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