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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Машинопись 

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

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

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

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

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

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

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

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

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

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

Машинопись 

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

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

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

Опции управления

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

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

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

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

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

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

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

Машинопись 

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

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

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

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

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

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

  • zoomControl включает/отключает управление масштабированием. По умолчанию этот элемент управления видим и отображается в правом нижнем углу карты. Поле zoomControlOptions дополнительно указывает ZoomControlOptions который будет использоваться для этого элемента управления.
  • cameraControl включает/отключает управление камерой. Этот элемент управления по умолчанию виден на картах, использующих бета-канал . Поле cameraControlOptions дополнительно указывает CameraControlOptions который будет использоваться для этого элемента управления.
  • mapTypeControl включает/отключает элемент управления «Тип карты», который позволяет пользователю переключаться между типами карт (например, «Карта» и «Спутник»). По умолчанию этот элемент управления видим и отображается в верхнем левом углу карты. Поле mapTypeControlOptions дополнительно указывает MapTypeControlOptions который будет использоваться для этого элемента управления.
  • streetViewControl включает/отключает элемент управления человечком, который позволяет пользователю активировать панораму Street View. По умолчанию этот элемент управления видим и отображается в правом нижнем углу карты. Поле streetViewControlOptions дополнительно указывает StreetViewControlOptions который будет использоваться для этого элемента управления.
  • rotateControl включает/отключает появление элемента управления Rotate для управления ориентацией изображений под углом 45°. По умолчанию наличие элемента управления определяется наличием или отсутствием изображения под углом 45° для данного типа карты при текущем масштабе и местоположении. Вы можете изменить поведение элемента управления, задав для свойства rotateControlOptions карты значение RotateControlOptions , которое будет использоваться. Вы не сможете отобразить элемент управления, если нет доступных изображений под углом 45°.
  • scaleControl включает/отключает элемент управления Scale, который обеспечивает масштаб карты. По умолчанию этот элемент управления не виден. Если этот параметр включен, он всегда будет отображаться в правом нижнем углу карты. 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). В этих случаях элементы управления будут действовать в соответствии с логикой, указанной для каждой позиции, и будут отображаться как можно ближе к указанному положению.

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

Машинопись 

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. В следующем коде показана функция для создания элемента кнопки, который перемещает карту по центру Чикаго. 

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 только в качестве контейнера для хранения собственных элементов управления; никогда не используйте DIV как интерактивный элемент пользовательского интерфейса.
  • При необходимости используйте элемент label , атрибут title или атрибут aria-label , чтобы предоставить информацию об элементе пользовательского интерфейса.

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

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

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

API размещает элементы управления в каждой позиции в порядке index свойства; элементы управления с меньшим индексом размещаются первыми. Например, два настраиваемых элемента управления в позиции BOTTOM_RIGHT будут расположены в соответствии с этим порядком индекса, причем более низкие значения индекса будут иметь приоритет. По умолчанию все пользовательские элементы управления размещаются после размещения любых элементов управления API по умолчанию. Это поведение можно переопределить, задав для свойства 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, центрируя карту в определенном месте по умолчанию:

Машинопись 

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

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