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

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

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

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

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

По часовой стрелке сверху слева: Тип карты, Полноэкранный режим, Камера, Просмотр улиц, Сочетания клавиш.

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

  • Элемент управления «Тип карты» доступен в виде выпадающего списка или горизонтальной панели кнопок, позволяющей пользователю выбрать тип карты ( ROADMAP , SATELLITE , HYBRID или TERRAIN ). По умолчанию этот элемент управления отображается в верхнем левом углу карты.
  • Элемент управления «Полноэкранный режим» позволяет открыть карту в полноэкранном режиме. Этот элемент управления включен по умолчанию на настольных и мобильных устройствах. Примечание: iOS не поддерживает полноэкранный режим. Поэтому элемент управления «Полноэкранный режим» не отображается на устройствах iOS.
  • В панели управления камерой предусмотрены функции масштабирования и панорамирования.
  • Элемент управления «Просмотр улиц» содержит значок человечка, который можно перетащить на карту, чтобы включить просмотр улиц. По умолчанию этот элемент управления отображается в правом нижнем углу карты.
  • Элемент управления «Поворот» позволяет одновременно наклонять и поворачивать карты, содержащие трехмерные изображения. По умолчанию этот элемент управления отображается в правом нижнем углу карты. Дополнительную информацию см. в разделе «Обзор 3D-изображений» .
  • Элемент управления «Масштаб» отображает масштаб карты. По умолчанию этот элемент управления отключен.
  • В элементе управления «Сочетания клавиш» отображается список сочетаний клавиш для взаимодействия с картой.

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

Не все эти элементы управления включены по умолчанию. Чтобы узнать о поведении пользовательского интерфейса по умолчанию (и о том, как его изменить), см. раздел «Поведение пользовательского интерфейса по умолчанию» ниже.

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

По умолчанию все элементы управления исчезают, если карта слишком мала (200x200 пикселей). Вы можете изменить это поведение, явно сделав элемент управления видимым. См. раздел «Добавление элементов управления на карту» .

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

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

Отключить стандартный пользовательский интерфейс

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

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

Машинопись 

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

JavaScript 

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js
Посмотреть пример

Попробуйте образец

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

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

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

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

По умолчанию все элементы управления исчезают, если размер карты меньше 200x200 пикселей. Вы можете изменить это поведение, явно установив для элемента управления видимость. Например, в следующей таблице показано, виден ли элемент управления камерой или нет, в зависимости от размера карты и значения поля cameraControl :

Размер карты cameraControl Видно?
Любой false Нет
Любой true Да
>= 200x200px undefined Да
< 200x200px undefined Нет

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

Машинопись 

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.ts

JavaScript 

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js
Посмотреть пример

Попробуйте образец

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

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

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

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

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

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

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

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

Машинопись 

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.ts

JavaScript 

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.js
Посмотреть пример

Попробуйте образец

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

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

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

  • cameraControl включает/отключает элемент управления камерой, позволяющий пользователю масштабировать и перемещать карту. Этот элемент управления по умолчанию отображается на всех картах. Поле cameraControlOptions дополнительно указывает параметры CameraControlOptions , используемые для этого элемента управления.
  • mapTypeControl включает/отключает элемент управления «Тип карты», позволяющий пользователю переключаться между типами карт (например, «Карта» и «Спутник»). По умолчанию этот элемент управления виден и отображается в верхнем левом углу карты. Поле mapTypeControlOptions дополнительно указывает параметры MapTypeControlOptions , используемые для этого элемента управления.
  • streetViewControl включает/отключает элемент управления Pegman, позволяющий пользователю активировать панораму Street View. По умолчанию этот элемент управления виден и отображается в правом нижнем углу карты. Поле streetViewControlOptions дополнительно указывает параметры StreetViewControlOptions , используемые для этого элемента управления.
  • rotateControl включает/отключает отображение элемента управления «Поворот» для управления ориентацией 3D-изображений. По умолчанию наличие элемента управления определяется наличием или отсутствием 3D-изображений для данного типа карты при текущем масштабе и местоположении. Вы можете изменить поведение элемента управления, задав rotateControlOptions карты, чтобы указать используемые параметры RotateControlOptions . Элемент управления будет отображаться только на базовых 3D-картах.
  • scaleControl включает/отключает элемент управления Scale, который задает масштаб карты. По умолчанию этот элемент управления невидим. При включении он всегда будет отображаться в правом нижнем углу карты. Параметр scaleControlOptions дополнительно указывает параметры ScaleControlOptions используемые для этого элемента управления.
  • fullscreenControl включает/отключает элемент управления, открывающий карту в полноэкранном режиме. По умолчанию этот элемент управления включен на настольных компьютерах и устройствах Android. При включении элемент управления отображается в правом верхнем углу карты. Параметр fullscreenControlOptions дополнительно указывает параметры FullscreenControlOptions используемые для этого элемента управления.

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

Управление позиционированием

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

Существует два типа позиций элементов управления: устаревшие и логические. Рекомендуется использовать логические значения , чтобы обеспечить автоматическую поддержку как компоновки слева направо (LTR), так и справа налево (RTL). См. справочное руководство .

В следующих таблицах показаны поддерживаемые положения элементов управления в контекстах LTR и RTL.

позиции LTR

Позиция (контекст LTR) Логическая константа (рекомендуется) Наследие Константа
Вверху слева BLOCK_START_INLINE_START TOP_LEFT
Верхний центр BLOCK_START_INLINE_CENTER TOP_CENTER
Вверху справа BLOCK_START_INLINE_END TOP_RIGHT
Левый верхний INLINE_START_BLOCK_START LEFT_TOP
Левый центр INLINE_START_BLOCK_CENTER LEFT_CENTER
Левый нижний INLINE_START_BLOCK_END LEFT_BOTTOM
Правый верхний INLINE_END_BLOCK_START RIGHT_TOP
Правый центр INLINE_END_BLOCK_CENTER RIGHT_CENTER
Правый нижний INLINE_END_BLOCK_END RIGHT_BOTTOM
Нижний левый угол BLOCK_END_INLINE_START BOTTOM_LEFT
Нижний центр BLOCK_END_INLINE_CENTER BOTTOM_CENTER
Нижний правый угол BLOCK_END_INLINE_END BOTTOM_RIGHT

позиции RTL

Позиция (контекст RTL) Логическая константа (рекомендуется) Наследие Константа
Вверху справа BLOCK_START_INLINE_START TOP_RIGHT
Верхний центр BLOCK_START_INLINE_CENTER TOP_CENTER
Вверху слева BLOCK_START_INLINE_END TOP_LEFT
Правый верхний INLINE_START_BLOCK_START RIGHT_TOP
Правый центр INLINE_START_BLOCK_CENTER RIGHT_CENTER
Правый нижний INLINE_START_BLOCK_END RIGHT_BOTTOM
Левый верхний INLINE_END_BLOCK_START LEFT_TOP
Левый центр INLINE_END_BLOCK_CENTER LEFT_CENTER
Левый нижний INLINE_END_BLOCK_END LEFT_BOTTOM
Нижний правый угол BLOCK_END_INLINE_START BOTTOM_RIGHT
Нижний центр BLOCK_END_INLINE_CENTER BOTTOM_CENTER
Нижний левый угол BLOCK_END_INLINE_END BOTTOM_LEFT

Нажмите на надписи, чтобы переключать карту между режимами LTR и RTL.

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

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

Машинопись 

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

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
Посмотреть пример

Попробуйте образец

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

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

Для создания собственного пользовательского элемента управления достаточно нескольких правил. Однако следующие рекомендации могут служить примером передовой практики:

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

Каждая из этих проблем обсуждается ниже.

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

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

Для создания привлекательных элементов управления необходимы некоторые знания CSS и структуры DOM. Приведенные ниже примеры кода демонстрируют добавление пользовательского элемента управления с использованием как декларативных HTML-методов, так и программных методов.

Декларативный CSS

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

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

Декларативный HTML

Эти фрагменты кода показывают, как создать декларативный элемент управления. В HTML для позиционирования элемента управления используется DIV с ID container ; он вложен в элемент gmp-map , а кнопка добавляется в этот DIV. Атрибут slot установлен на control-inline-start-block-start чтобы расположить элемент управления в верхнем левом углу карты. 

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

В JavaScript для поиска DIV и кнопки используется getElementById() , к кнопке добавляется обработчик события, и кнопка добавляется к DIV. 

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

Программный JavaScript

Этот фрагмент кода демонстрирует программное создание элемента управления «кнопка». CSS-стили определены выше. 

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(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 только в качестве контейнера для размещения стандартных элементов управления; никогда не используйте DIV в качестве интерактивного элемента пользовательского интерфейса.
  • Для предоставления информации об элементе пользовательского интерфейса используйте элемент label , атрибут title или атрибут aria-label , в зависимости от ситуации.

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

Используйте атрибут slot для размещения пользовательских элементов управления, указав необходимое положение элемента управления. Информацию об этих положениях см. в разделе «Размещение элементов управления» выше.

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

Следующий код создает новый пользовательский элемент управления (его конструктор не показан) и добавляет его на карту в позицию BLOCK_START_INLINE_END (в правом верхнем углу в контексте LTR). 

// 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);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

Чтобы задать положение пользовательского элемента управления декларативно, укажите атрибут slot в HTML-коде: 

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

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

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

Машинопись 

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

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
Посмотреть пример

Попробуйте образец

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

Элементы управления также могут хранить состояние. Следующий пример аналогичен показанному ранее, но элемент управления содержит дополнительную кнопку «Установить домашний адрес», которая устанавливает новое местоположение дома. Для этого мы создаем свойство home_ внутри элемента управления для хранения этого состояния и предоставления методов получения и установки этого состояния.

Машинопись 

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

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
Посмотреть пример

Попробуйте образец