Frontend

0:18

This media is not supported in your browser

VIEW IN TELEGRAM

Geolokatsiyani aniqlash va uni xaritada ko'rsatish 🗺

Geolocation API yordamida foydalanuvchining koordinatalarini olishingiz va keyin ularni xaritadan joyni topish uchun ishlatishingiz mumkin.

        <p class="status"></p>
        <iframe class="map" src=""></iframe>
        <button class="button">Men qayerdaman?</button>

const button = document.querySelector(".button"),
  map = document.querySelector(".map"),
  status = document.querySelector(".status");

button.addEventListener('click', findLocation); 

function findLocation() {
  if (!navigator.geolocation) {
    status.textContent = 'Ваш браузер не дружит с геолокацией...';
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
  }

  function success(position) {  
    const { longitude, latitude } = position.coords;
    map.src = `https://www.openstreetmap.org/export/embed.html?bbox=${longitude}%2C${latitude}&layer=mapnik`;
  }

  function error() {
    status.textContent = 'Baribir topaman!:0';
  }
}

👉🏼 @Frontend 👈🏼

www.tgoop.com/junior_developer/1036

721 viewsFeb 19, 2024 at 08:55

Geolokatsiyani aniqlash va uni xaritada ko'rsatish 🗺

Geolocation API yordamida foydalanuvchining koordinatalarini olishingiz va keyin ularni xaritadan joyni topish uchun ishlatishingiz mumkin.

        <p class="status"></p>
        <iframe class="map" src=""></iframe>
        <button class="button">Men qayerdaman?</button>

const button = document.querySelector(".button"),
  map = document.querySelector(".map"),
  status = document.querySelector(".status");

button.addEventListener('click', findLocation); 

function findLocation() {
  if (!navigator.geolocation) {
    status.textContent = 'Ваш браузер не дружит с геолокацией...';
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
  }

  function success(position) {  
    const { longitude, latitude } = position.coords;
    map.src = `https://www.openstreetmap.org/export/embed.html?bbox=${longitude}%2C${latitude}&layer=mapnik`;
  }

  function error() {
    status.textContent = 'Baribir topaman!:0';
  }
}

BY Frontend