Контрол масштабирования (Zoom Control) — стандартный элемент интерфейса Google Maps JavaScript API, предназначенный для изменения уровня приближения карты. Обычно он отображается в виде двух кнопок:
С помощью этого контрола пользователь может быстро изменять детализацию отображаемой области без использования колесика мыши, жестов на сенсорных устройствах или программного изменения масштаба.
Контрол масштабирования относится к встроенным элементам управления
карты и может настраиваться через параметры объекта
Map.
Каждая карта Google Maps использует числовое значение масштаба
(zoom).
Пример:
| Значение zoom | Уровень детализации |
|---|---|
| 1 | Почти весь мир |
| 5 | Страна или крупный регион |
| 10 | Город |
| 15 | Район города |
| 18 | Улицы и здания |
| 21+ | Максимальная детализация |
При нажатии на кнопку увеличения карта увеличивает значение
zoom, а при уменьшении — снижает его.
Например:
const map = new google.maps.Map(
document.getElementById("map"),
{
center: { lat: 55.7558, lng: 37.6176 },
zoom: 10
}
);Начальный масштаб установлен на уровне 10.
В большинстве случаев Zoom Control отображается автоматически.
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 55.7558,
lng: 37.6176
},
zoom: 12
}
);В данном примере никаких дополнительных настроек не требуется.
После создания карты справа внизу или справа на карте появятся кнопки управления масштабом.
Фактическое расположение зависит от версии интерфейса Google Maps и используемой конфигурации карты.
Если ранее контрол был отключён или требуется явно указать его
отображение, используется параметр zoomControl.
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 59.9386,
lng: 30.3141
},
zoom: 13,
zoomControl: true
}
);Значение:
zoomControl: trueуказывает браузеру отображать встроенный контрол масштабирования.
Для полного скрытия элемента управления используется значение
false.
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 56.8389,
lng: 60.6057
},
zoom: 14,
zoomControl: false
}
);После создания карты кнопки масштабирования отображаться не будут.
При этом возможность изменения масштаба программно сохраняется.
Например:
map.setZoom(16);Контрол масштабирования может работать вместе с другими встроенными элементами интерфейса:
Пример:
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 55.751244,
lng: 37.618423
},
zoom: 12,
zoomControl: true,
fullscreenControl: true,
mapTypeControl: true,
streetViewControl: true
}
);Все контролы будут отображаться одновременно и независимо друг от друга.
Zoom Control является лишь интерфейсом для изменения свойства
zoom.
То же самое можно делать программно.
map.setZoom(
map.getZoom() + 1
);map.setZoom(
map.getZoom() - 1
);map.setZoom(18);Таким образом встроенный контрол и методы API используют один и тот же механизм изменения масштаба.
Для получения текущего значения применяется метод
getZoom().
const zoom = map.getZoom();
console.log(zoom);Возможный результат:
14Это позволяет создавать собственные элементы управления, отображающие текущее значение масштаба.
Google Maps предоставляет событие zoom_changed.
Оно срабатывает каждый раз при изменении масштаба:
setZoom().Пример:
map.addListener(
"zoom_changed",
() => {
console.log(
"Текущий масштаб:",
map.getZoom()
);
}
);При каждом изменении масштаба новое значение будет выводиться в консоль.
Для предотвращения слишком сильного отдаления используется параметр
minZoom.
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 55.7558,
lng: 37.6176
},
zoom: 10,
minZoom: 8
}
);После достижения значения 8 дальнейшее уменьшение
масштаба станет невозможным.
Даже нажатия на кнопку «−» не приведут к изменению уровня приближения.
Для запрета чрезмерного увеличения используется параметр
maxZoom.
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 55.7558,
lng: 37.6176
},
zoom: 15,
maxZoom: 18
}
);При достижении масштаба 18 кнопка увеличения перестанет
изменять карту.
На практике часто задают диапазон допустимых значений.
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 55.7558,
lng: 37.6176
},
zoom: 12,
minZoom: 9,
maxZoom: 17
}
);Разрешённые уровни масштабирования будут находиться в диапазоне:
9 – 17Любые попытки выйти за пределы диапазона будут автоматически игнорироваться.
Иногда стандартный Zoom Control не соответствует требованиям дизайна. В этом случае создаются собственные элементы интерфейса.
HTML:
<button id="zoomIn">
Увеличить
</button>
<button id="zoomOut">
Уменьшить
</button>Jav * aScript:
document
.getElementById("zoomIn")
.addEventListener(
"click",
() => {
map.setZoom(
map.getZoom() + 1
);
}
);
document
.getElementById("zoomOut")
.addEventListener(
"click",
() => {
map.setZoom(
map.getZoom() - 1
);
}
);В такой реализации встроенный Zoom Control обычно отключают:
zoomControl: falseМожно создавать собственую логику последовательного приближения.
function zoomToCity() {
let zoom = map.getZoom();
const interval = setInterval(() => {
zoom++;
map.setZoom(zoom);
if (zoom >= 16) {
clearInterval(interval);
}
}, 300);
}Функция будет постепенно увеличивать масштаб до уровня
16.
Часто масштаб влияет на содержимое карты.
Пример отображения маркеров только при достаточном приближении:
map.addListener(
"zoom_changed",
() => {
const zoom = map.getZoom();
if (zoom >= 14) {
marker.setMap(map);
} else {
marker.setMap(null);
}
}
);Такой подход позволяет уменьшить визуальную перегруженность карты.
Изменение масштаба часто используется для динамического изменения элементов страницы.
map.addListener(
"zoom_changed",
() => {
const zoom = map.getZoom();
if (zoom > 15) {
infoPanel.style.display = "block";
} else {
infoPanel.style.display = "none";
}
}
);При сильном приближении может отображаться дополнительная информация, статистика или элементы навигации.
Иногда необходимо полностью убрать встроенный интерфейс.
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 55.7558,
lng: 37.6176
},
zoom: 12,
disableDefaultUI: true
}
);В этом случае исчезнет не только Zoom Control, но и остальные встроенные элементы управления.
Даже после отключения всех контролов можно вернуть только масштабирование.
const map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: 55.7558,
lng: 37.6176
},
zoom: 12,
disableDefaultUI: true,
zoomControl: true
}
);В результате на карте останется только контрол масштабирования.
minZoom и
maxZoom.zoom_changed для динамического
обновления интерфейса.