Frontend Portal

Определяем геолокацию и отображаем на карте



С помощью Geolocation API можно получить координаты пользователя, а после найти по ним место на карте. Для этого создадим небольшую функцию, которая соберёт ссылку с долготой и широтой, а после вставим её в iframe c картой



HTML:

<p class="status"></p>

<iframe class="map" src=""></iframe>

<button class="button">Где я?</button>



JavaScript:

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}&amp;layer=mapnik`;

  }



  function error() { // если всё плохо, просто напишем об этом

    status.textContent = 'Я тебе всё равно найду!:0';

  }

}




👉 @FrontendPortal | #js