Controles

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.
Selecione a plataforma: Android iOS JavaScript

Visão geral dos controles

Os mapas exibidos pela API Maps JavaScript contêm elementos da IU para permitir a interação do usuário com o mapa. Esses elementos são conhecidos como controles, e você pode incluir variações desses controles no aplicativo. Se preferir, não faça nada e deixe a API Maps JavaScript processar todo o comportamento do controle.

O mapa a seguir mostra o conjunto padrão de controles exibidos pela API Maps JavaScript:

Veja abaixo uma lista com todo o conjunto de controles que você pode usas em mapas:

  • O controle Zoom exibe os botões "quot;+" e "-" para alterar o nível de zoom do mapa. Esse controle é exibido por padrão no canto inferior direito do mapa.
  • O controle Tipo de mapa está disponível no estilo de um menu suspenso ou de uma barra de botões horizontal, permitindo que o usuário escolha um tipo de mapa (ROADMAP, SATELLITE, HYBRID ou TERRAIN). Esse controle é exibido por padrão no canto superior esquerdo do mapa.
  • O controle do Street View contém um ícone do Pegman, que pode ser arrastado para o mapa para ativar o Street View. Esse controle é exibido por padrão perto do canto inferior direito do mapa.
  • O Controle de rotação fornece uma combinação de opções de inclinação e rotação para mapas que contêm imagens oblíquas. Esse controle é exibido por padrão perto do canto inferior direito do mapa. Consulte imagens de 45° para mais informações.
  • O controle Escala exibe um elemento de escala do mapa. Por padrão, esse controle é desativado.
  • O controle de tela cheia 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 o recurso de tela cheia. Portanto, o controle de tela cheia não fica visível em dispositivos iOS.
  • O controle de atalhos do teclado exibe uma lista de atalhos de teclado para interagir com o mapa.

Os controles não podem ser acessados ou modificados diretamente. Em vez disso, você modifica os campos MapOptions do mapa, que afetam a visibilidade e a apresentação dos controles. Você pode ajustar a apresentação do controle ao instanciar seu mapa (com o MapOptions apropriado) ou modificar um mapa dinamicamente chamando setOptions() para alterar as opções.

Nem todos esses controles estão ativados por padrão. Para saber mais sobre o comportamento padrão da IU e como modificá-lo, consulte A IU padrão abaixo.

A IU padrão

Por padrão, todos os controles desaparecem se o mapa é muito pequeno (200x200 px). É possível substituir esse comportamento definindo explicitamente o controle para ficar visível. Consulte Como adicionar controles ao mapa.

O comportamento e a aparência dos controles são os mesmos em dispositivos móveis e computadores, exceto no controle em tela cheia. Veja o comportamento descrito na lista de controles.

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

Desativar a IU padrão

Você pode desativar todos os botões de IU padrão da API. Para fazer isso, defina a propriedade disableDefaultUI do mapa (no objeto MapOptions) como true. Essa propriedade desativa os botões de controle da IU da API Maps JavaScript. No entanto, ela não afeta gestos do mouse ou atalhos do teclado no mapa básico, que são controlados pelas propriedades gestureHandling e keyboardShortcuts, respectivamente.

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

TypeScript

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

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

JavaScript

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

window.initMap = initMap;
Ver exemplo

Testar amostra

Adicionar controles ao mapa

Você pode personalizar sua interface removendo, adicionando ou modificando o comportamento ou controles da IU e garantir que futuras atualizações não alterem esse comportamento. Se quiser adicionar ou modificar apenas o comportamento existente, verifique se o controle foi adicionado explicitamente ao aplicativo.

Alguns controles aparecem no mapa por padrão, outros não aparecem a menos que você os solicite especificamente. A adição ou remoção de controles do mapa é especificada nos seguintes campos do objeto MapOptions, definidos como true para torná-los visíveis ou definidos como false para ocultá-los:

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

Por padrão, todos os controles desaparecem se o mapa é menor que 200x200 px. É possível substituir esse comportamento definindo explicitamente o controle para ficar 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 na configuração do campo zoomControl:

Tamanho do mapa zoomControl Visível?
Qualquer false No
Qualquer true Yes
>= 200x200px undefined Yes
< 200x200px undefined No

O exemplo a seguir define o mapa para ocultar o controle de zoom e exibir o controle de escala. Não desativamos explicitamente a IU padrão. Portanto, essas modificações são complementares ao comportamento padrão dela.

TypeScript

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

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

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;
Ver exemplo

Testar amostra

Opções dos controles

Vários controles são configuráveis, permitindo que você altere o comportamento ou altere a aparência. O controle Tipo de mapa, por exemplo, pode aparecer como uma barra horizontal ou um menu suspenso.

Esses controles são modificados alterando os campos de opções de controle adequados no objeto MapOptions após a criação do mapa.

Por exemplo, as opções para alterar o controle "Tipo de mapa" são indicadas no campo mapTypeControlOptions. O controle"Tipo de mapa"pode aparecer em uma das seguintes opções de style:

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

Se você modificar alguma opção de controle, precisará ativar explicitamente o controle definindo também o valor MapOptions apropriado como true. Por exemplo, para definir um controle do tipo de mapa para exibir o estilo DROPDOWN_MENU, use o código a seguir no objeto MapOptions:

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

O exemplo a seguir demonstra como alterar a posição e o estilo padrão dos controles.

TypeScript

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

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

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

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;
Ver exemplo

Testar amostra

Normalmente, os controles são configurados durante a criação do mapa. No entanto, você pode mudar a apresentação dos controles de forma dinâmica chamando o método setOptions() de Map, transmitindo novas opções de controle para ele.

Modificar controles

Especifique uma apresentação de controle ao criar seu mapa nos campos do objeto MapOptions do mapa. Estes campos são indicados abaixo:

  • zoomControl ativa/desativa o controle de zoom. Por padrão, esse controle é visível e aparece próximo ao canto inferior direito do mapa. O campo zoomControlOptions também especifica o ZoomControlOptions que será usado nesse controle.
  • mapTypeControl ativa/desativa o controle do tipo de mapa, que permite ao usuário alternar entre os tipos de mapas, como "Mapa" e "Satélite". Por padrão, esse controle é visível e aparece no canto superior esquerdo do mapa. O campo mapTypeControlOptions também especifica o MapTypeControlOptions a ser usado para esse controle.
  • streetViewControl ativa/desativa o controle Pegman, que permite que o usuário ative um panorama do Street View. Por padrão, esse controle é visível e aparece próximo ao canto inferior direito do mapa. O campo streetViewControlOptions também especifica o StreetViewControlOptions a ser usado para esse controle.
  • rotateControl ativa/desativa a aparência de um controle de rotação para controlar a orientação de imagens em 45°. Por padrão, a presença de controle é determinada pela presença ou ausência de imagens de 45° para o tipo de mapa especificado no local e no zoom atual. Para alterar o comportamento do controle, defina o rotateControlOptions do mapa para especificar o RotateControlOptions a ser usado. Não é possível fazer com que o controle apareça se não houver imagens de 45° disponíveis no momento.
  • scaleControl ativa/desativa o controle de escala, que oferece uma escala simples do mapa. Por padrão, esse controle não é visível. Quando ativada, ela sempre aparecerá no canto inferior direito do mapa. O scaleControlOptions também especifica a ScaleControlOptions a ser usada para esse controle.
  • fullscreenControl ativa/desativa o controle que abre o mapa no modo de tela cheia. Por padrão, esse controle é ativado por padrão em computadores e dispositivos Android. Quando ativo, o controle aparece perto da parte superior direita do mapa. O fullscreenControlOptions também especifica a FullscreenControlOptions a ser usada para esse controle.

Observe que é possível especificar opções para controles inicialmente desativados.

Posicionar controles

A maioria das opções de controle contém uma propriedade position do tipo ControlPosition, que indica onde colocar o controle no mapa. O posicionamento desses controles não é absoluto. Em vez disso, a API exibirá os controles de maneira inteligente, fluindo-os em torno de elementos do mapa existentes ou de outros controles dentro de certas restrições (como o tamanho do mapa).

Observação: não é possível garantir que os controles não se sobreponham a determinados layouts complicados, embora a API tente organizá-los de maneira inteligente.

As posições de controle seguintes são permitidas:

  • TOP_CENTER indica que o controle precisa ser colocado na parte superior central do mapa.
  • TOP_LEFT indica que o controle deve ser colocado na parte superior esquerda do mapa, com todos os subelementos do controle "flowing" na parte superior central.
  • TOP_RIGHT indica que o controle deve ser colocado no canto superior direito do mapa, com todos os subelementos do controle "flowing" na parte superior central.
  • LEFT_TOP indica que o controle deve ser posicionado no canto superior esquerdo do mapa, mas abaixo de elementos TOP_LEFT.
  • RIGHT_TOP indica que o controle deve ser colocado no canto superior direito do mapa, mas abaixo de elementos TOP_RIGHT.
  • LEFT_CENTER indica que o controle deve ser colocado no lado esquerdo do mapa, centralizado entre as posições TOP_LEFT e BOTTOM_LEFT.
  • RIGHT_CENTER indica que o controle deve ser colocado no lado direito do mapa, centralizado entre as posições TOP_RIGHT e BOTTOM_RIGHT.
  • LEFT_BOTTOM indica que o controle deve ser colocado no canto inferior esquerdo do mapa, mas acima de elementos BOTTOM_LEFT.
  • RIGHT_BOTTOM indica que o controle deve ser colocado no canto inferior direito do mapa, mas acima de elementos BOTTOM_RIGHT.
  • BOTTOM_CENTER indica que o controle precisa ser colocado na parte inferior central do mapa.
  • BOTTOM_LEFT indica que o controle precisa ser colocado na parte inferior esquerda do mapa, com todos os subelementos do controle "flowing" em direção à parte inferior central.
  • BOTTOM_RIGHT indica que o controle deve ser colocado na parte inferior direita do mapa, com todos os subelementos do controle "flowing" em direção à parte inferior central.

Essas posições podem coincidir com posições de elementos da IU com posições que não podem ser modificadas (como direitos autorais e o logotipo do Google). Nesses casos, os controles fluirão de acordo com a lógica indicada para cada posição e aparecerão o mais próximo possível da posição indicada.

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

TypeScript

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

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

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;
Ver exemplo

Testar amostra

Controles personalizados

Além de modificar o estilo e a posição dos controles de API existentes, você pode criar seus próprios controles para lidar com a interação com o usuário. Os controles são widgets estacionários que flutuam sobre o mapa em posições absolutas, ao contrário das sobreposições, que se movem com o mapa. Basicamente, um controle é um elemento <div> que tem uma posição absoluta no mapa, exibe alguma IU ao usuário e processa a interação com o usuário ou o mapa, geralmente por meio de um manipulador de eventos.

Algumas regras são necessárias para criar o seu controle personalizado. No entanto, as diretrizes a seguir podem funcionar como prática recomendada:

  • Defina uma CSS adequada para os elementos de controle a exibir.
  • Processe a interação com o usuário ou o mapa usando manipuladores de eventos para alterações de propriedade do mapa ou eventos do usuário (por exemplo, eventos 'click').
  • Crie um elemento <div> para conter o controle e adicione-o à propriedade controls do Map.

Todas essas questões são discutidas a seguir.

Como desenhar controles personalizados

Você decide como desenhar o seu controle. Geralmente, recomendamos colocar toda a apresentação do controle em um único elemento <div> para que você possa manipular o controle como uma unidade. Usamos esse padrão de projeto nos exemplos mostrados a seguir.

Para criar controles atraentes, é necessário ter algum conhecimento sobre as estruturas CSS e DOM. O código a seguir mostra uma função para criar um elemento de botão que movimenta o mapa para ficar centralizado 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

O controle deve fazer alguma coisa para ser útil. Você decide o que o controle faz. O controle pode responder à entrada do usuário ou pode responder a mudanças no estado Map's.

Para responder à entrada do usuário, use addEventListener(), que gerencia eventos DOM compatíveis. O snippet de código a seguir adiciona um listener ao evento 'click' do navegador. Observe que 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);
});

Como tornar os 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, elementos de formulários e rótulos. Use um elemento DIV como contêiner para conter controles nativos. Nunca reutilize um DIV como elemento de IU interativo.
  • Use o elemento label, o atributo title ou o atributo aria-label quando apropriado para fornecer informações sobre um elemento da IU.

Posicionar controles personalizados

Os controles personalizados são posicionados no mapa em posições apropriadas na propriedade controls do objeto Map. Essa propriedade contém uma matriz de google.maps.ControlPositions. Para adicionar um controle personalizado ao mapa, adicione a Node (normalmente <div>) a uma ControlPosition apropriada. Para mais informações sobre essas posições, consulte Posicionamento de controle acima.

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

A API coloca os controles em cada posição pela ordem de uma propriedade index. Os controles com um índice menor são colocados primeiro. Por exemplo, dois controles personalizados na posição BOTTOM_RIGHT serão dispostos de acordo com essa ordem de índice, com valores de índice mais baixos tendo precedência. Por padrão, todos os controles personalizados são colocados após a inserção de todos os controles padrão da API. Para substituir esse comportamento, defina uma propriedade index de controle como um valor negativo. Os controles personalizados não podem ser colocados à esquerda do logotipo nem à direita dos direitos autorais.

O código a seguir cria um novo controle personalizado, que não é mostrado no construtor, 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);

Um exemplo de controle personalizado

O controle a seguir é simples, embora não seja particularmente útil, e combina os padrões mostrados acima. Esse controle responde a eventos 'click' do DOM centralizando o mapa em um determinado local padrão:

TypeScript

let map: google.maps.Map;

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

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

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

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

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

  return controlButton;
}

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

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

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

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

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;
Ver exemplo

Testar amostra

Adicionar estado a controles

Os controles também podem armazenar estado. O exemplo a seguir é semelhante ao mostrado anteriormente, mas o controle contém um botão adicional "Definir casa" que define o controle para exibir um novo local de casa. Para isso, criamos uma propriedade home_ no controle para armazenar esse estado e fornecer getters e setters para esse estado.

TypeScript

let map: google.maps.Map;

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

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

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

    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("div");

    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;

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("div");

    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("div");

    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;
Ver exemplo

Testar amostra