Элементы управления

Выберите платформу: Android iOS JavaScript

Обзор элементов управления

Карты в Maps JavaScript API содержат элементы графического интерфейса, позволяющие пользователям взаимодействовать с картой. Они известны как элементы управления, и вы можете добавлять их в свое приложение. Однако это необязательно – если вы используете Maps JavaScript API, он будет контролировать поведение всех элементов управления.

На следующей карте показан набор элементов управления по умолчанию, доступный в Maps JavaScript API.

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

• Масштабирование – кнопки "+" и "-" для изменения масштаба карты. По умолчанию этот элемент управления находится в правом нижнем углу карты.
• Тип карты – раскрывающийся список или горизонтальная кнопка для выбора типа карты (ROADMAP, SATELLITE, HYBRID или TERRAIN). По умолчанию располагается в верхнем левом углу карты.
• Просмотр улиц – значок человечка, который можно перетащить на карту, чтобы открыть Просмотр улиц. По умолчанию этот элемент управления находится в правом нижнем углу карты.
• Ориентация – комбинация настроек наклона и ориентации. Действует, если для карты доступны перспективные аэрофотоснимки. По умолчанию этот элемент можно найти рядом с правым нижним углом карты. Подробнее о просмотре под углом 45°…
• Линейка масштаба – по умолчанию этот элемент управления отключен.
• Полный экран – открывает карту в полноэкранном режиме. В версиях для компьютеров и мобильных устройств этот элемент включен по умолчанию. Примечание. Полноэкранный режим не поддерживается на устройствах iOS, поэтому элемента управления для перехода в полноэкранный режим на устройствах iOS нет.
• Быстрые клавиши – список клавиатурных сокращений для взаимодействия с картой.

Получить прямой доступ к элементам управления (в том числе для их модификации) нельзя. Однако вы можете изменять поля карты MapOptions, которые отвечают за видимость и представление элементов управления. Визуальное представление элементов управления можно задавать при создании экземпляров карты (параметры MapOptions) или изменять динамически через вызов настроек карты setOptions().

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

Пользовательский интерфейс по умолчанию

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

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

Кроме того, на всех устройствах по умолчанию включена обработка команд клавиатуры.

Отключение пользовательского интерфейса по умолчанию

Вы можете полностью отключить кнопки, заданные API по умолчанию, установив для свойства карты disableDefaultUI (внутри объекта MapOptions) значение true. Это свойство отключает в Maps JavaScript API все кнопки пользовательского интерфейса по умолчанию, не затрагивая при этом жесты мыши и быстрые клавиши (контролируются свойствами gestureHandling и keyboardShortcuts соответственно).

Следующий фрагмент кода отключает кнопки пользовательского интерфейса:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js

Примечание. Код JavaScript скомпилирован из фрагмента кода TypeScript.

Посмотреть пример

Примеры кода

JSFiddle.net Google Cloud Shell

Как добавить элементы управления на карту

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

Некоторые элементы управления видны на карте по умолчанию, а некоторые добавляются, только если вы явным образом их запросите. Их можно добавлять и удалять с помощью полей объекта MapOptions: значение true делает элемент видимым, а false скрывает его.

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

По умолчанию, если размер карты слишком мал (200 х 200 пикс.), никакие элементы управления на ней не показываются. Это поведение можно изменить, явно указав, что элементы должны быть видны. Например, следующая таблица показывает, будет ли элемент управления масштабом доступен на карте в зависимости от размера карты и значения в поле zoomControl.

Размер карты	zoomControl	Доступен на карте
Все	false	Нет
Все	true	Да
>= 200 x 200 пикс.	undefined	Да
< 200 x 200 пикс.	undefined	Нет

В следующем примере показано, как скрыть элемент управления масштабом и добавить линейку масштаба. Отметим, что здесь мы не отключаем интерфейс по умолчанию напрямую, а меняем его поведение.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
index.js

Примечание. Код JavaScript скомпилирован из фрагмента кода TypeScript.

Посмотреть пример

Примеры кода

JSFiddle.net Google Cloud Shell

Параметры элементов управления

Некоторые элементы управления можно настраивать, изменяя их поведение и внешний вид. Например, элемент Тип карты может иметь форму горизонтальной полосы или выпадающего меню.

Изменить эти элементы управления можно с помощью параметров в объекте MapOptions при создании карты.

Например, параметры для изменения типа карты указаны в поле mapTypeControlOptions. Элемент выбора типа карты можно задать одним из следующих вариантов переменной style:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR – кнопки на горизонтальной панели, как в Google Картах.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU – одна кнопка, где тип карты можно выбрать из выпадающего меню.
• google.maps.MapTypeControlStyle.DEFAULT – вид по умолчанию, который зависит от размера экрана и может измениться в будущих версиях API.

Учтите, что при изменении параметров элемента управления этот элемент нужно явным образом включить, присвоив значение true соответствующему полю MapOptions. Например, чтобы установить для элемента выбора типа карты стиль DROPDOWN_MENU, используйте следующий код внутри объекта MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

В следующем примере показано, как изменить расположение и стиль элементов управления по умолчанию.

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;
index.js

Примечание. Код JavaScript скомпилирован из фрагмента кода TypeScript.

Посмотреть пример

Примеры кода

JSFiddle.net Google Cloud Shell

Элементы управления обычно настраиваются при создании карты. Однако внешний вид элемента управления можно менять и динамически. Для этого вызывается метод setOptions() объекта Map, которому передаются параметры.

Изменение элементов управления

Внешний вид элемента управления определяется при создании карты с помощью полей объекта MapOptions. Назначение этих полей объясняется ниже.

• zoomControl – включает/отключает масштабирование. По умолчанию этот элемент управления виден и находится в правом нижнем углу карты. Поле zoomControlOptions задает дополнительно параметры ZoomControlOptions для этого элемента управления.
• mapTypeControl – включает/отключает выбор типа карты ("Карта", "Спутник" или "Рельеф"). По умолчанию этот элемент управления виден и находится в левом верхнем углу карты. Поле mapTypeControlOptions дополнительно задает параметры MapTypeControlOptions для этого элемента управления.
• streetViewControl – включает/отключает значок человечка, который можно перетащить на карту, чтобы открыть Просмотр улиц. По умолчанию этот элемент управления виден и находится в правом нижнем углу карты. Поле streetViewControlOptions дополнительно задает параметры StreetViewControlOptions для этого элемента управления.
• rotateControl – включает/отключает элемент управления "Ориентация" для просмотра аэрофотоснимков под углом 45°. Наличие этого элемента зависит от доступности аэрофотоснимков для выбранного типа карты, масштаба и показанной на карте территории. Его поведение можно изменить, задав настройки rotateControlOptions в объекте RotateControlOptions. Элемент управления нельзя сделать видимым, если аэрофотоснимки отсутствуют.
• scaleControl – включает/отключает линейку масштаба. По умолчанию этот элемент управления недоступен. Если вы его включите, он появляется в правом нижнем углу карты. Поле scaleControlOptions дополнительно задает параметры ScaleControlOptions для этого элемента управления.
• fullscreenControl – включает/отключает кнопку перехода карты в полноэкранный режим. Этот элемент управления по умолчанию включен в версии для компьютеров и устройств Android (находится в верхней правой части карты). Поле fullscreenControlOptions дополнительно задает параметры FullscreenControlOptions для этого элемента управления.

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

Расположение элементов управления

Большинство элементов управления содержат свойство position (типа ControlPosition), указывающее расположение элемента управления на карте. Оно не задается абсолютными значениями. Вместо этого API распределяет элементы управления на экране так, чтобы они, с учетом размера карты и других ограничений, не перекрывали объекты на карте и другие элементы управления.

Примечание. Хотя в API предусмотрены механизмы, препятствующие наложению элементов, мы не можем гарантировать, что этого не произойдет.

Поддерживаются следующие варианты расположения элементов управления:

• TOP_CENTER – элемент управления находится по центру у верхнего края карты.
• TOP_LEFT – элемент управления находится в левом верхнем углу карты, а вложенные элементы разворачиваются по направлению к центру верхнего края.
• TOP_RIGHT – элемент управления находится в правом верхнем углу карты, а вложенные элементы разворачиваются по направлению к центру верхнего края.
• LEFT_TOP – элемент управления находится в левом верхнем углу карты, под элементами, для которых задано значение TOP_LEFT.
• RIGHT_TOP – элемент управления находится в правом верхнем углу карты, под элементами, для которых задано значение TOP_RIGHT.
• LEFT_CENTER – элемент управления находится по центру у левого края карты, между элементами, для которых заданы значения TOP_LEFT и BOTTOM_LEFT.
• RIGHT_CENTER – элемент управления находится по центру у правого края карты, между элементами, для которых заданы значения TOP_RIGHT и BOTTOM_RIGHT.
• LEFT_BOTTOM – элемент управления находится в левом нижнем углу карты, над элементами, для которых задано значение BOTTOM_LEFT.
• RIGHT_BOTTOM – элемент управления находится в правом нижнем углу карты, над элементами, для которых задано значение BOTTOM_RIGHT.
• BOTTOM_CENTER – элемент управления находится по центру у нижнего края карты.
• BOTTOM_LEFT – элемент управления находится в левом нижнем углу карты, а вложенные элементы разворачиваются по направлению к центру нижнего края.
• BOTTOM_RIGHT – элемент управления находится в правом нижнем углу карты, а вложенные элементы разворачиваются по направлению к центру нижнего края.

Следует отметить, что перечисленные варианты расположения могут совпадать с позициями элементов пользовательского интерфейса, которые нельзя изменять (например, предупреждением об авторских правах и логотипом Google). В таких случаях элементы управления размещаются в соответствии с логикой, заданной для каждой позиции, и отображаются максимально близко к ней.

В следующем примере показана простая карта, на которой включены все элементы управления в разных позициях.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
index.js

Примечание. Код JavaScript скомпилирован из фрагмента кода TypeScript.

Посмотреть пример

Примеры кода

JSFiddle.net Google Cloud Shell

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

Вы можете не только изменять стиль и расположение существующих элементов управления API, но и создавать собственные. Элементы управления представляют собой статичные виджеты. Их положение на карте не меняется (в отличие от наложений, которые перемещаются вместе с картой). Таким образом, элемент управления – это тег <div>, который имеет абсолютную позицию на карте, реализует определенное поведение пользовательского интерфейса и взаимодействует с пользователем или картой (как правило, через обработчик событий).

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

• Определите стили CSS для отображения элементов управления.
• Используйте для взаимодействия с пользователями или картой обработчики, отслеживающие изменения свойств карты и пользовательские события (например, 'click').
• Создайте элемент <div>, в котором будет находиться элемент управления, и добавьте его в свойство controls объекта Map.

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

Отрисовка пользовательских элементов управления

Вы можете сами выбрать способ отрисовки элементов управления. Мы рекомендуем размещать весь код элементов управления внутри одной пары тегов <div>, чтобы с ним можно было работать как с единым целым. Эта конструкция будет использоваться в приведенных ниже примерах.

Для создания привлекательных элементов управления вам потребуется знание CSS и структуры DOM. Во фрагменте кода ниже задана функция кнопки, которая смещает карту так, чтобы ее центр был расположен в Чикаго.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

Обработка событий в пользовательских элементах управления

Чтобы элемент управления был полезен, он должен что-то делать. Что именно – решаете вы. Например, он может обрабатывать данные, введенные пользователями, или реагировать на изменение состояния объекта Map.

Для реагирования на ввод данных пользователем применяйте метод addEventListener(), позволяющий обрабатывать поддерживаемые DOM-события. Следующий фрагмент кода добавляет прослушиватель к событию 'click' браузера. Отметим, что это событие поступает от структуры DOM, а не от карты.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

Доступ к пользовательским элементам управления

Чтобы элементы управления корректно реагировали на нажатия клавиш и считывались программами чтения с экрана:

• Всегда используйте нативные элементы HTML для кнопок, форм и меток. Используйте разделитель DIV в качестве контейнера только для нативных элементов управления (и никогда как интерактивный элемент).
• Для добавления информации об элементе интерфейса используйте label и атрибуты title или aria-label (если применимо).

Расположение пользовательских элементов управления

Персонализированные элементы управления позиционируются на карте с помощью свойства controls объекта Map. Это свойство содержит массив значений google.maps.ControlPosition. Чтобы добавить на карту собственный элемент управления, добавьте узел Node (обычно <div>) в нужную позицию ControlPosition. Подробнее об этом рассказывается в разделе Расположение элементов управления.

Каждое значение ControlPosition содержит массив MVCArray для элементов управления, расположенных в данной позиции. В результате, когда элементы управления добавляются в позицию или удаляются из нее, API меняет расположение остальных элементов управления.

API размещает элементы управления в порядке увеличения значения свойства index. Элементы с меньшим индексом размещаются первыми. Например, если для двух персонализированных элементов управления указана позиция BOTTOM_RIGHT, тот из них, чей индекс ниже, имеет приоритет. По умолчанию все персонализированные элементы управления размещаются после элементов по умолчанию. Это правило можно изменить, присвоив свойству index элемента управления отрицательное значение. Пользовательские элементы управления нельзя помещать слева от логотипа или справа от уведомления об авторских правах.

В примере ниже создается персонализированный элемент управления (конструктор не показан), который затем добавляется на карту в позицию TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

Пример пользовательского элемента управления

Следующий простой (хотя не особенно полезный) элемент управления приведен для иллюстрации описанных выше правил. Он реагирует на события 'click' структуры DOM, центрируя карту в заданной по умолчанию точке.

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

Примечание. Код JavaScript скомпилирован из фрагмента кода TypeScript.

Посмотреть пример

Примеры кода

JSFiddle.net Google Cloud Shell

Состояния элементов управления

Элементы управления также могут включать в себя состояния. Пример ниже аналогичен предыдущему с той лишь разницей, что элемент управления содержит кнопку "Set Home" для указания нового домашнего адреса. Для этого в элементе управления создается свойство home_, которое хранит состояние элемента и реализует методы его чтения и записи.

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

Примечание. Код JavaScript скомпилирован из фрагмента кода TypeScript.

Посмотреть пример

Примеры кода

JSFiddle.net Google Cloud Shell