Контрол полноэкранного режима

Контрол полноэкранного режима (Fullscreen Control) позволяет переводить карту в режим отображения на весь экран браузера. После активации пользователь получает больше пространства для работы с картой, что особенно важно при просмотре крупных территорий, маршрутов, кластеров маркеров и детализированных геоданных.

В интерфейсе Google Maps JavaScript API кнопка полноэкранного режима отображается как стандартный элемент управления картой и интегрируется в общую систему контролов.

Основные преимущества использования полноэкранного режима:

  • увеличение полезной площади карты;
  • улучшение восприятия пространственных данных;
  • удобство навигации на мобильных устройствах;
  • комфортная работа со сложными картографическими интерфейсами;
  • повышение удобства просмотра спутниковых снимков и маршрутов.

Включение полноэкранного контрола

По умолчанию контрол полноэкранного режима обычно включён на большинстве современных устройств и браузеров, поддерживающих Fullscreen API. Для явного включения используется параметр fullscreenControl.

const map = new google.maps.Map(
  document.getElementById("map"),
  {
    center: {
      lat: 55.7558,
      lng: 37.6176
    },
    zoom: 10,
    fullscreenControl: true
  }
);

В данном примере кнопка перехода в полноэкранный режим будет отображаться на карте независимо от других настроек управления.

Отключение полноэкранного режима

Если полноэкранный режим не требуется, контрол можно скрыть.

const map = new google.maps.Map(
  document.getElementById("map"),
  {
    center: {
      lat: 55.7558,
      lng: 37.6176
    },
    zoom: 10,
    fullscreenControl: false
  }
);

После установки значения false кнопка исчезает из интерфейса карты.

Подобный подход применяется в случаях, когда:

  • карта встроена в административную панель;
  • используется собственный набор элементов управления;
  • полноэкранный режим противоречит дизайну приложения;
  • интерфейс должен оставаться строго ограниченным размерами контейнера.

Расположение контрола

Как и большинство встроенных элементов Google Maps JavaScript API, контрол полноэкранного режима может быть размещён в различных областях карты.

Для этого используется свойство fullscreenControlOptions.

const map = new google.maps.Map(
  document.getElementById("map"),
  {
    center: {
      lat: 55.7558,
      lng: 37.6176
    },
    zoom: 10,

    fullscreenControl: true,

    fullscreenControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT
    }
  }
);

В приведённом примере кнопка будет расположена в левом верхнем углу карты.

Доступные позиции

Для размещения контрола используются значения перечисления google.maps.ControlPosition.

Наиболее распространённые варианты:

google.maps.ControlPosition.TOP_LEFT
google.maps.ControlPosition.TOP_CENTER
google.maps.ControlPosition.TOP_RIGHT

google.maps.ControlPosition.LEFT_TOP
google.maps.ControlPosition.RIGHT_TOP

google.maps.ControlPosition.BOTTOM_LEFT
google.maps.ControlPosition.BOTTOM_CENTER
google.maps.ControlPosition.BOTTOM_RIGHT

Пример размещения в правом нижнем углу:

fullscreenControlOptions: {
  position: google.maps.ControlPosition.BOTTOM_RIGHT
}

При проектировании интерфейса следует учитывать расположение остальных контролов, чтобы избежать наложения элементов друг на друга.

Полный пример настройки

Ниже приведён пример карты с активированным полноэкранным режимом и пользовательским расположением кнопки.

<!DOCTYPE html>
<html>
<head>
  <title>Fullscreen Control</title>

  <style>
    #map {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>

<div id="map"></div>

<script>
function initMap() {

  const map = new google.maps.Map(
    document.getElementById("map"),
    {
      center: {
        lat: 59.9386,
        lng: 30.3141
      },

      zoom: 12,

      fullscreenControl: true,

      fullscreenControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
      }
    }
  );

}
</script>

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  async
  defer>
</script>

</body>
</html>

После нажатия на кнопку карта будет развёрнута на весь экран браузера. Повторное нажатие возвращает её к исходным размерам.

Работа через Fullscreen API браузера

Контрол Google Maps фактически использует возможности Fullscreen API, встроенного в браузер.

При переходе в полноэкранный режим браузер:

  1. увеличивает контейнер карты до размеров экрана;
  2. скрывает большую часть интерфейса страницы;
  3. изменяет размеры области отображения карты;
  4. автоматически инициирует перерасчёт отображаемых тайлов.

С точки зрения разработчика никаких дополнительных действий обычно не требуется.

Поддержка браузеров

Работа контрола зависит от поддержки браузером стандарта Fullscreen API.

На современных версиях браузеров поддержка присутствует:

  • Google Chrome;
  • Microsoft Edge;
  • Mozilla Firefox;
  • Safari;
  • мобильные браузеры Android.

На некоторых мобильных устройствах поведение может отличаться из-за ограничений операционной системы или встроенного браузера.

Если браузер не поддерживает полноэкранный режим, контрол может быть скрыт автоматически.

Проверка поддержки полноэкранного режима

При необходимости можно самостоятельно проверить наличие поддержки Fullscreen API.

if (document.fullscreenEnabled) {
  console.log("Полноэкранный режим поддерживается");
} else {
  console.log("Полноэкранный режим недоступен");
}

Такую проверку иногда используют для условного отображения пользовательских элементов управления.

Взаимодействие с другими контролами

Полноэкранный режим не конфликтует со стандартными контролами Google Maps.

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

  • Zoom Control;
  • Street View Control;
  • Rotate Control;
  • Scale Control;
  • Map Type Control.

Пример конфигурации:

const map = new google.maps.Map(
  document.getElementById("map"),
  {
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    rotateControl: true,
    fullscreenControl: true
  }
);

После разворачивания карты все активные элементы управления продолжают работать в штатном режиме.

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

На смартфонах полноэкранный режим особенно полезен из-за ограниченного размера экрана.

Преимущества:

  • карта занимает всю доступную область дисплея;
  • элементы интерфейса страницы не отвлекают внимание;
  • увеличивается область просмотра маршрутов;
  • упрощается работа с жестами масштабирования и перемещения.

Однако необходимо учитывать, что разные мобильные браузеры могут реализовывать полноэкранный режим по-разному.

Особенности адаптивной верстки

При использовании адаптивного интерфейса контейнер карты часто имеет относительные размеры.

Например:

#map {
  width: 100%;
  height: 60vh;
}

После перехода в полноэкранный режим Google Maps автоматически изменяет размеры контейнера, а при выходе возвращает исходные параметры.

Поэтому дополнительные обработчики изменения размеров обычно не требуются.

Комбинирование с пользовательскими контролами

Полноэкранный режим можно использовать одновременно с собственными элементами управления.

Пример создания пользовательской панели:

const customControl = document.createElement("button");

customControl.textContent = "Мои объекты";

map.controls[
  google.maps.ControlPosition.TOP_LEFT
].push(customControl);

При разворачивании карты в полноэкранный режим пользовательский контрол остаётся доступным, поскольку входит в структуру интерфейса карты.

Отслеживание изменения полноэкранного состояния

Иногда требуется выполнять действия при входе или выходе из полноэкранного режима.

Для этого используется событие браузера fullscreenchange.

document.addEventListener(
  "fullscreenchange",
  () => {

    if (document.fullscreenElement) {
      console.log("Полноэкранный режим включён");
    } else {
      console.log("Полноэкранный режим выключен");
    }

  }
);

Подобный механизм полезен для:

  • изменения интерфейса приложения;
  • скрытия вспомогательных панелей;
  • переключения режимов отображения данных;
  • логирования действий пользователя.

Ограничения полноэкранного контрола

Несмотря на простоту использования, существуют определённые ограничения.

Зависимость от браузера

Функциональность определяется поддержкой Fullscreen API конкретным браузером.

Ограничения встроенных WebView

Некоторые мобильные приложения используют встроенные браузерные компоненты (WebView), в которых полноэкранный режим может работать неполностью либо быть отключён.

Пользовательские политики безопасности

Отдельные корпоративные среды и специализированные браузеры могут ограничивать работу полноэкранного режима.

Различия мобильных платформ

Поведение Safari на iOS и браузеров Android может отличаться по отображению системных элементов интерфейса.

Практические рекомендации

Размещать кнопку рядом с элементами навигации.

Пользователь ожидает увидеть её рядом с контролами масштабирования и переключения типов карты.

Использовать полноэкранный режим для насыщенных картографических интерфейсов.

Особенно это актуально для:

  • логистических систем;
  • диспетчерских панелей;
  • геоинформационных систем;
  • приложений мониторинга транспорта;
  • сервисов построения маршрутов.

Не отключать контрол без необходимости.

Полноэкранный режим является привычной функцией большинства современных картографических сервисов.

Проверять работу на мобильных устройствах.

Даже при одинаковом коде особенности реализации Fullscreen API могут отличаться между платформами и браузерами.

Учитывать расположение остальных контролов.

Грамотно организованная компоновка интерфейса делает работу с картой значительно удобнее и уменьшает вероятность визуальных конфликтов между элементами управления.

Оглавление