Controles

Visão geral dos controles

Os mapas apresentados pela API Maps JavaScript contêm elementos da interface que permitem a interação do usuário com o mapa. Esses elementos são conhecidos como controles, e é possível incluir variações dos controles no seu aplicativo. Outra opção é não fazer nada e deixar que a API Maps JavaScript processe o comportamento de todos os controles.

Confira no mapa a seguir o conjunto padrão de controles mostrado pela API Maps JavaScript:

Estes são todos os controles que você pode usar nos mapas:

• Zoom: mostra os botões "+" e "-" para mudar o nível de zoom do mapa. Por padrão, fica no canto inferior direito do mapa.
• O controle da câmera tem controles de zoom e movimentação e é exibido por padrão no lugar do controle de zoom ao usar o canal Beta.
• O Tipo de mapa está disponível como menu suspenso ou barra de botões horizontal, permitindo que o usuário escolha um tipo de mapa (ROADMAP, SATELLITE, HYBRID ou TERRAIN). Por padrão, fica no canto superior esquerdo do mapa.
• Street View: contém um ícone do Pegman, que ativa o Street View quando é arrastado para o mapa. Por padrão, esse controle fica à direita, próximo à parte de baixo do mapa.
• Girar: apresenta uma combinação de opções para inclinar e girar mapas com imagens oblíquas. Por padrão, fica à direita, próximo à parte de baixo do mapa. Confira mais informações em Imagens em 45°.
• Escala: mostra um elemento para alterar a escala do mapa. Esse controle fica desativado por padrão.
• Tela Inteira: oferece a opção de abrir o mapa no modo de tela cheia. Esse controle é ativado por padrão em computadores e dispositivos móveis. Observação: o iOS não é compatível com esse elemento. Portanto, o controle de tela inteira não aparece em dispositivos iOS.
• Atalhos do teclado: mostra uma lista de atalhos de teclado para interação com o mapa.

Não é possível acessar ou modificar diretamente esses controles do mapa. Você precisa modificar os campos MapOptions dele, que afetam a visibilidade e a apresentação dos controles. Ajuste a apresentação dos controles criando uma instância do mapa (com as MapOptions apropriadas) ou modifique o mapa de forma dinâmica chamando setOptions() para alterar as opções dele.

Nem todos esses controles são ativados por padrão. Para saber mais sobre o comportamento padrão da interface (e como fazer alterações), consulte a seção A interface padrão abaixo.

A interface padrão

Por padrão, todos os controles desaparecem quando o mapa é muito pequeno (200 x 200 px). Para substituir esse comportamento, defina explicitamente o controle como visível. Consulte Adicionar controles ao mapa.

O comportamento e o visual dos controles é o mesmo em dispositivos móveis e em computadores, exceto pelo controle de tela inteira (confira as descrições nesta lista).

Além disso, o processamento do teclado é ativado por padrão em todos os dispositivos.

Desativar a interface padrão

Se você quiser desativar completamente os botões de interface padrão da API, defina a propriedade disableDefaultUI do mapa (no objeto MapOptions) como true. Ela desativa os botões de controle de interface da API Maps JavaScript. No entanto, ela não afeta o mouse nem os atalhos de teclado no mapa base, que são controlados pelas propriedades gestureHandling e keyboardShortcuts, respectivamente.

O código a seguir desativa os botões da interface:

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

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

Adicionar controles ao mapa

Personalize a interface removendo, adicionando ou modificando o comportamento ou os controles da interface e não permita que as atualizações futuras alterem esse comportamento. Para adicionar ou modificar um comportamento atual, verifique se o controle foi adicionado explicitamente ao seu aplicativo.

Alguns controles aparecem no mapa por padrão, outros, apenas quando especificamente solicitados. Os campos a seguir do objeto MapOptions definem a adição ou remoção de controles do mapa. Use true para tornar visíveis e false para ocultar os controles.

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

Por padrão, todos os controles desaparecem quando o mapa é menor que 200 x 200 px. Para substituir esse comportamento, defina explicitamente o controle como visível. Por exemplo, a tabela a seguir mostra se o controle de zoom fica visível ou não com base no tamanho do mapa e no campo zoomControl:

No próximo exemplo, a configuração do mapa oculta o controle de zoom e mostra o de escala. Não desativamos a interface padrão de forma explícita, então as modificações são adicionadas ao comportamento padrão da interface.

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

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

Opções dos controles

É possível configurar vários controles, o que permite alterar o comportamento e a aparência deles. O controle de tipo de mapa, por exemplo, pode aparecer como uma barra horizontal ou um menu suspenso.

Para modificar esses controles, altere os campos apropriados das opções de controle no objeto MapOptions ao criar o mapa.

Por exemplo, o campo mapTypeControlOptions indica como alterar o "Tipo de mapa", que pode aparecer em uma das seguintes opções de style:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR mostra a matriz de controles como botões em uma barra horizontal, igual à do Google Maps.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU mostra um controle de botão único para selecionar o tipo de mapa usando um menu suspenso.
• google.maps.MapTypeControlStyle.DEFAULT mostra o comportamento padrão, que depende do tamanho da tela e pode mudar em futuras versões da API.

Se você modificar alguma opção, ative também o controle de forma explícita, definindo o valor de MapOptions apropriado como true. Por exemplo, para que um controle "Tipo de mapa" tenha o estilo DROPDOWN_MENU, use o código a seguir no objeto MapOptions:

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

Este exemplo demonstra como mudar a posição e o estilo padrão dos controles.

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

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

Normalmente, os controles são configurados na criação do mapa, mas é possível alterar a apresentação deles de forma dinâmica chamando o método setOptions() do Map, transmitindo novas opções de controle.

Modificar controles

Você especifica uma apresentação do controle quando cria o mapa, usando os campos do objeto MapOptions, que são descritos abaixo:

• zoomControl ativa/desativa o controle "Zoom". Por padrão, esse controle fica visível à direita, próximo à parte de baixo do mapa. O campo zoomControlOptions também especifica o ZoomControlOptions a ser usado nesse controle.
• cameraControl ativa/desativa o controle da câmera. Esse controle fica visível por padrão nos mapas que usam o canal Beta. O campo cameraControlOptions também especifica o CameraControlOptions a ser usado nesse controle.
• mapTypeControl ativa/desativa o controle "Tipo de mapa" usado para alternar entre tipos (como Mapa e Satélite). Por padrão, esse controle fica visível no canto superior esquerdo do mapa. O campo mapTypeControlOptions também especifica o MapTypeControlOptions a ser usado nesse controle.
• streetViewControl ativa/desativa o controle "Pegman", usado para ativar um panorama do Street View. Por padrão, esse controle fica visível à direita, próximo à parte de baixo do mapa. O campo streetViewControlOptions também especifica o StreetViewControlOptions a ser usado nesse controle.
• rotateControl ativa/desativa a exibição do controle "Girar" para controlar a orientação das imagens em 45°. Por padrão, o controle é mostrado ou não de acordo com a presença ou ausência de imagens em 45° no zoom e localização atuais do tipo de mapa especificado. Para alterar o comportamento do controle, defina o objeto rotateControlOptions do mapa para especificar o uso de RotateControlOptions. O controle não vai aparecer se nenhuma imagem em 45° estiver disponível.
• scaleControl ativa/desativa o controle "Escala", que fornece uma escala do mapa. Por padrão, esse controle não fica visível. Quando ativo, ele aparece no canto inferior direito do mapa. O scaleControlOptions também especifica o ScaleControlOptions a ser usado nesse controle.
• fullscreenControl ativa/desativa o controle que abre o mapa no modo de tela inteira. Por padrão, esse controle é ativado em computadores e dispositivos Android. Quando ativo, ele fica à direita, perto da parte de cima do mapa. O fullscreenControlOptions também especifica o FullscreenControlOptions a ser usado nesse controle.

É possível especificar opções para controles inicialmente desativados.

Posicionamento dos controles

A maioria das opções contém uma propriedade position (do tipo ControlPosition). Ela indica o posicionamento dos controles no mapa, que não é fixo. Na verdade, eles são posicionados pela API de forma inteligente, em torno de elementos ou outros controles, de acordo com as restrições informadas (como o tamanho do mapa).

Observação: embora a API tente organizar os controles de modo inteligente, não é possível garantir que eles não se sobreponham em layouts complexos.

Estas posições de controle são permitidas:

• TOP_CENTER: indica o posicionamento na parte superior central do mapa.
• TOP_LEFT: indica o posicionamento à esquerda, na parte de cima do mapa, com os subelementos do controle fluindo em direção à porção superior central.
• TOP_RIGHT: indica o posicionamento à direita, na parte de cima do mapa, com os subelementos do controle fluindo em direção à porção superior central.
• LEFT_TOP: indica o posicionamento à esquerda, na parte de cima do mapa, mas abaixo dos elementos TOP_LEFT.
• RIGHT_TOP: indica o posicionamento à direita, na parte de cima do mapa, mas abaixo dos elementos TOP_RIGHT.
• LEFT_CENTER: indica o posicionamento no lado esquerdo do mapa, centralizado entre as posições TOP_LEFT e BOTTOM_LEFT.
• RIGHT_CENTER: indica o posicionamento no lado direito do mapa, centralizado entre as posições TOP_RIGHT e BOTTOM_RIGHT.
• LEFT_BOTTOM: indica o posicionamento à esquerda, na parte de baixo do mapa, mas acima dos elementos BOTTOM_LEFT.
• RIGHT_BOTTOM: indica o posicionamento à direita, na parte de baixo do mapa, mas acima dos elementos BOTTOM_RIGHT.
• BOTTOM_CENTER: indica o posicionamento na parte inferior central do mapa.
• BOTTOM_LEFT: indica o posicionamento à esquerda, na parte de baixo do mapa, com os subelementos do controle fluindo em direção à porção inferior central.
• BOTTOM_RIGHT: indica o posicionamento à direita, na parte de baixo do mapa, com os subelementos do controle fluindo em direção à porção inferior central.

É possível que essas posições coincidam com as de elementos da interface que não podem ser modificadas (como direitos autorais e o logotipo do Google). Nesses casos, os controles fluem de acordo com a lógica descrita para cada posição e são mostrados o mais próximo possível da posição indicada.

O exemplo a seguir apresenta um mapa simples com todos os controles ativados em posições diferentes.

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

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

Controles personalizados

Além de modificar o estilo e a posição dos controles de API, você pode criar os seus para processar a interação com o usuário. Controles são widgets estáticos que flutuam sobre um mapa em posições fixas, diferente das sobreposições, que se movem com o mapa. Basicamente, um controle é um elemento <div> que tem uma posição fixa no mapa, mostra IUs e processa interações com o usuário ou o mapa, em geral, usando um manipulador de eventos.

É necessário seguir algumas regras para criar seu próprio controle personalizado. No entanto, as diretrizes abaixo podem servir como práticas recomendadas:

• Defina um CSS adequado para os elementos de controle mostrarem.
• Use manipuladores de eventos para processar a interação com o usuário ou o mapa em mudanças de propriedade ou eventos do usuário, por exemplo, 'click'.
• Crie um elemento <div> para o controle e adicione à propriedade controls do Map.

Todas essas questões são discutidas abaixo.

Como desenhar controles personalizados

Você decide como desenhar seu controle. Recomendamos que coloque toda a apresentação do controle em um só elemento <div> para que ele possa ser manipulado como uma única unidade. Nos exemplos mostrados a seguir, usamos esse padrão.

Criar controles atraentes exige algum conhecimento da estrutura de CSS e DOM. O código a seguir mostra uma função para criar um botão que movimenta o mapa e o centraliza em 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;
}

Processar eventos de controles personalizados

Para ser útil, o controle precisa fazer alguma coisa, e é você quem decide o quê. Ele pode responder a entradas do usuário ou a mudanças no estado do Map.

Para responder à entrada do usuário, use addEventListener(), que processa eventos DOM compatíveis. O snippet de código a seguir adiciona um listener ao evento 'click' do navegador. Esse evento é recebido do DOM e não do mapa.

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

Tornar controles personalizados acessíveis

Para garantir que os controles recebam eventos de teclado e apareçam corretamente nos leitores de tela:

• Sempre use elementos HTML nativos para botões, itens de formulários e rótulos. Use elementos DIV apenas como contêiner para controles nativos. Nunca reutilize um DIV como um elemento interativo da interface.
• Use o elemento label, o atributo title ou o atributo aria-label, quando apropriado, para disponibilizar informações sobre um elemento da interface.

Posicionar controles personalizados

Os controles personalizados são colocados no mapa em posições apropriadas na propriedade controls do objeto Map. Ela contém uma matriz de google.maps.ControlPositions. Para adicionar um controle personalizado ao mapa, inclua Node (normalmente <div>) em um objeto ControlPosition apropriado. Consulte mais informações sobre o assunto em Posicionamento dos controles.

Cada ControlPosition armazena um MVCArray dos controles mostrados na posição. Como resultado, a API atualiza os controles quando são adicionados ou removidos da posição.

Ela coloca os controles em cada posição pela ordem de uma propriedade index. Aqueles com índice menor são posicionados primeiro. Por exemplo, dois controles personalizados na posição BOTTOM_RIGHT vão seguir a ordem desse índice, e os valores com índices menores terão preferência. Os controles padrão da API são posicionados antes dos personalizados. Para substituir esse comportamento, defina uma propriedade index do controle com um valor negativo. Não é permitido posicionar controles personalizados à esquerda do logotipo nem à direita dos direitos autorais.

O código a seguir cria um novo controle personalizado (o construtor não é mostrado) e o adiciona ao mapa na posição 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);

Exemplo de controle personalizado

O controle a seguir é simples (embora não muito útil) e combina os padrões mostrados acima. Ele responde a eventos DOM 'click' centralizando o mapa em um determinado local padrão:

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

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

Adicionar estado aos controles

Os controles também podem armazenar estado. O exemplo a seguir é semelhante ao mostrado anteriormente, mas o controle tem um outro botão "Definir casa" que configura uma nova localização de casa a ser exibida. Para isso, criamos uma propriedade home_ no controle para armazenar esse estado e fornecer getters e setters a ele.

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

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