Geolocation API интеграция

Базовая модель получения координат пользователя в браузере

Geolocation API предоставляет доступ к географическим координатам устройства через интерфейс браузера. Основной принцип работы основан на асинхронных запросах к аппаратным источникам данных: GPS, Wi-Fi позиционирование, данные сотовых сетей.

Ключевой метод:

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Структура результата:

{
  coords: {
    latitude: number,
    longitude: number,
    accuracy: number,
    altitude: number | null,
    heading: number | null,
    speed: number | null
  },
  timestamp: number
}

Основные ограничения:

  • обязательное разрешение пользователя
  • работа только через HTTPS (исключение — localhost)
  • возможная неточность в зависимости от устройства

Подготовка карты Google Maps JavaScript API

Google предоставляет JavaScript API для отображения интерактивных карт, маркеров и слоёв. Базовая инициализация карты:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 2
  });
}

Карта создаётся с нейтральным центром, который позже будет заменён координатами пользователя.

Центрирование карты по текущему местоположению

Интеграция начинается с получения координат и последующего обновления состояния карты.

function success(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;

  const userLocation = { lat, lng };

  map.setCenter(userLocation);
  map.setZoom(15);
}

Вызов:

navigator.geolocation.getCurrentPosition(success, error);

Результат:

  • карта автоматически перемещается к пользователю
  • увеличивается масштаб для локального обзора

Добавление маркера текущей позиции

Для визуального обозначения положения используется маркер:

let userMarker;

function success(position) {
  const userLocation = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  if (!userMarker) {
    userMarker = new google.maps.Marker({
      position: userLocation,
      map: map,
      title: "Текущее местоположение"
    });
  } else {
    userMarker.setPosition(userLocation);
  }

  map.setCenter(userLocation);
}

Маркер обновляется при каждом новом получении координат.

Отслеживание перемещения пользователя

Geolocation API поддерживает режим непрерывного слежения:

const watchId = navigator.geolocation.watchPosition(success, error, {
  enableHighAccuracy: true,
  maximumAge: 1000,
  timeout: 5000
});

Обновление маркера в реальном времени:

function success(position) {
  const userLocation = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  userMarker.setPosition(userLocation);
  map.panTo(userLocation);
}

Ключевые параметры:

  • enableHighAccuracy — использование GPS вместо сетевых данных
  • maximumAge — допустимый кэш координат
  • timeout — максимальное время ожидания

Обработка ошибок геолокации

Типичные ошибки:

function error(err) {
  switch (err.code) {
    case err.PERMISSION_DENIED:
      console.log("Доступ к геолокации запрещён");
      break;
    case err.POSITION_UNAVAILABLE:
      console.log("Координаты недоступны");
      break;
    case err.TIMEOUT:
      console.log("Превышено время ожидания");
      break;
  }
}

Поведение системы:

  • при запрете доступа координаты не возвращаются
  • при таймауте запрос повторяется или прерывается
  • при недоступности сети возвращаются устаревшие данные (если разрешено maximumAge)

Использование точности координат

Поле accuracy позволяет адаптировать поведение карты:

function success(position) {
  const accuracy = position.coords.accuracy;

  if (accuracy > 1000) {
    map.setZoom(10);
  } else if (accuracy > 100) {
    map.setZoom(13);
  } else {
    map.setZoom(16);
  }
}

Логика масштабирования:

  • высокая погрешность → уменьшенный зум
  • высокая точность → детализированная карта

Интеграция с кастомными слоями карты

Google Maps JavaScript API позволяет накладывать дополнительные слои поверх геопозиции:

const trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Совмещение с геолокацией:

function success(position) {
  const userLocation = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  map.setCenter(userLocation);
}

Сценарии использования:

  • отображение дорожной ситуации вокруг пользователя
  • визуализация маршрутов
  • анализ плотности объектов

Оптимизация частоты обновлений

Частые обновления геопозиции могут перегружать интерфейс:

let lastUpdate = 0;

function success(position) {
  const now = Date.now();

  if (now - lastUpdate < 1000) return;

  lastUpdate = now;

  const userLocation = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  userMarker.setPosition(userLocation);
}

Результат:

  • снижение нагрузки на рендеринг карты
  • более стабильное поведение интерфейса

Работа с пользовательским интерфейсом карты

Google Maps JavaScript API позволяет отключать стандартные элементы управления:

map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 0, lng: 0 },
  zoom: 2,
  disableDefaultUI: true
});

Добавление собственных элементов управления:

const button = document.createElement("button");
button.textContent = "Моё местоположение";

button.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition(success, error);
});

map.controls[google.maps.ControlPosition.TOP_CENTER].push(button);

Поведение в мобильных браузерах

Geolocation API на мобильных устройствах использует:

  • GPS (наиболее точный источник)
  • Wi-Fi триангуляцию
  • данные вышек связи

Особенности:

  • высокая точность при включённом GPS
  • энергопотребление возрастает при watchPosition
  • возможны задержки при переключении сетей

Безопасность и ограничения доступа

Google и браузеры применяют строгие правила:

  • запрос геолокации всегда инициируется пользователем или скриптом после взаимодействия
  • доступ невозможен без HTTPS
  • повторные запросы могут блокироваться при отказе пользователя

Рекомендуемая практика:

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(success, error);
}

Синхронизация состояния карты и координат

Сложные приложения требуют связывания состояния:

let state = {
  position: null,
  mapCenter: null
};

function success(position) {
  state.position = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  state.mapCenter = state.position;

  map.setCenter(state.position);
}

Подходы:

  • единый state-объект
  • реактивные обновления (в SPA)
  • разделение логики геолокации и рендера

Работа с погрешностями и fallback-логикой

Если координаты недоступны, используется fallback:

function error() {
  const fallback = { lat: 51.5074, lng: -0.1278 }; // Лондон

  map.setCenter(fallback);
  map.setZoom(5);
}

Сценарии:

  • отказ пользователя
  • отсутствие GPS
  • корпоративные ограничения браузера

Комбинирование геолокации с маршрутами

Google Maps JavaScript API поддерживает построение маршрутов относительно текущего положения:

const directionsService = new google.maps.DirectionsService();

function buildRoute(destination) {
  navigator.geolocation.getCurrentPosition((position) => {
    const origin = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };

    directionsService.route({
      origin,
      destination,
      travelMode: google.maps.TravelMode.DRIVING
    }, (result, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(result);
      }
    });
  });
}

Логика:

  • геолокация определяет стартовую точку
  • маршрутизатор строит путь
  • карта автоматически обновляет отображение
Оглавление