Controles

Descripción general de los controles

Los mapas que se muestran a través de la API de Maps JavaScript contienen elementos de la IU que permiten que los usuarios interactúen con el mapa. Estos elementos se conocen como controles, y puedes incluir variaciones de ellos en tu aplicación. También puedes dejar todo como está y permitir que la API de Maps JavaScript se encargue de todo el comportamiento de los controles.

En el siguiente mapa, puedes ver el conjunto predeterminado de controles que muestra la API de Maps JavaScript:

En el sentido de las agujas del reloj, desde la esquina superior izquierda: Tipo de mapa, Pantalla completa, Cámara, Street View y Combinaciones de teclas.

A continuación, se muestra una lista de todos los conjuntos de controles que puedes usar en tus mapas:

• El control de tipo de mapa está disponible como un menú desplegable o una barra horizontal de botones y permite al usuario elegir un tipo de mapa (ROADMAP, SATELLITE, HYBRID o TERRAIN). Este control aparece de forma predeterminada en la esquina superior izquierda del mapa.
• El control de pantalla completa ofrece la opción de abrir el mapa en modo de pantalla completa. Este control está habilitado de forma predeterminada en computadoras de escritorio y dispositivos móviles. Nota: iOS no admite la función de pantalla completa. Por lo tanto, el control de pantalla completa no puede verse en dispositivos iOS.
• La función Control de la cámara incluye controles de zoom y desplazamiento lateral.
• El control de Street View contiene un ícono de hombrecito naranja que se puede arrastrar al mapa para habilitar las imágenes de Street View. Este control aparece de forma predeterminada cerca de la esquina inferior derecha del mapa.
• El control de rotación combina las opciones de inclinación y rotación para los mapas que contienen imágenes en 3D. Este control aparece de forma predeterminada cerca de la esquina inferior derecha del mapa. Consulta la descripción general en 3D para obtener más información.
• El control de escala muestra un elemento que indica la escala del mapa. Este control viene desactivado de manera predeterminada.
• El control de combinaciones de teclas muestra una lista de combinaciones de teclas para interactuar con el mapa.

No es posible acceder directamente a estos controles del mapa ni modificarlos. En su lugar, puedes modificar los campos MapOptions del mapa que afectan la visibilidad y la presentación de los controles. Puedes ajustar la presentación de los controles al crear instancias de tu mapa (con los campos correspondientes de MapOptions), o bien modificar un mapa de forma dinámica mediante una llamada a setOptions() para cambiar sus opciones.

No todos estos controles están habilitados de forma predeterminada. Para obtener información sobre el comportamiento predeterminado de la IU (y cómo modificarlo), consulta La IU predeterminada a continuación.

La IU predeterminada

De forma predeterminada, todos los controles desaparecen si el mapa es demasiado pequeño (200 x 200 px). Puedes anular este comportamiento si configuras de manera explícita los controles para que sean visibles. Consulta Cómo agregar controles al mapa.

El comportamiento y el aspecto de los controles es el mismo en dispositivos móviles y computadoras de escritorio, excepto por el control de pantalla completa (consulta el comportamiento descrito en la lista de controles).

A su vez, el manejo del teclado viene activado de manera predeterminada en todos los dispositivos.

Cómo inhabilitar la IU predeterminada

Es posible que desees desactivar por completo los botones de la IU predeterminada de la API. Para ello, configura la propiedad disableDefaultUI del mapa (en el objeto MapOptions) como true. Esta propiedad inhabilita los botones de control de la IU de la API de Maps JavaScript. Sin embargo, no afecta los gestos del mouse ni las combinaciones de teclas en el mapa base, que se controlan mediante las propiedades gestureHandling y keyboardShortcuts, respectivamente.

El siguiente código inhabilita los botones de la IU:

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

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

Cómo agregar controles al mapa

Es posible que desees adaptar tu interfaz y quitar, agregar o modificar el comportamiento de la IU o los controles, y que quieras asegurarte de que las actualizaciones futuras no alterarán este comportamiento. Si solo deseas agregar comportamientos o modificar los existentes, debes asegurarte de que el control se agregue de manera explícita a tu aplicación.

Algunos controles aparecen en el mapa de forma predeterminada, mientras que otros no se muestran a menos que los solicites específicamente. Los controles que agregues o quites en el mapa se especifican en los siguientes campos de objeto MapOptions, los cuales se configuran en true para que sean visibles o en false para ocultarlos:

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

De forma predeterminada, todos los controles desaparecen si el mapa tiene un tamaño inferior a 200 x 200 px. Puedes anular este comportamiento si configuras de manera explícita los controles para que sean visibles. Por ejemplo, en la siguiente tabla, se muestra si el control de la cámara está visible o no según el tamaño del mapa y la configuración del campo cameraControl:

En el siguiente ejemplo, se configura el mapa para que se oculte el control de cámara y se muestre el control de escala. Ten en cuenta que no inhabilitamos explícitamente la IU predeterminada, por lo que estas modificaciones se agregan al comportamiento predeterminado de la IU.

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

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

Opciones de controles

Hay varios controles que se pueden configurar para modificar su comportamiento o aspecto. Por ejemplo, el control de tipo de mapa puede aparecer como una barra horizontal o un menú desplegable.

Para editar estos controles, se modifican los campos de opciones de controles correspondiente en el objeto MapOptions cuando se crea el mapa.

Por ejemplo, las opciones para modificar el control de tipo de mapa se indican en el campo mapTypeControlOptions. El control de tipo de mapa puede aparecer en una de las siguientes opciones de style:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR muestra el array de controles como botones en una barra horizontal, como se muestra en Google Maps.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU muestra un control de un solo botón que te permite seleccionar el tipo de mapa con un menú desplegable.
• google.maps.MapTypeControlStyle.DEFAULT muestra el comportamiento predeterminado, que depende del tamaño de la pantalla y puede cambiar en versiones futuras de la API.

Ten en cuenta que, si modificas alguna de las opciones de los controles, también debes habilitar explícitamente el control configurando el valor de MapOptions correspondiente como true. Por ejemplo, para configurar un control de tipo de mapa a fin de que tenga el estilo DROPDOWN_MENU, usa el siguiente código en el objeto MapOptions:

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

En el siguiente ejemplo, se muestra cómo cambiar la posición y el estilo predeterminados de los controles.

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

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

Los controles normalmente se configuran al crear el mapa. Sin embargo, puedes modificar la presentación de los controles de forma dinámica si llamas al método setOptions() de Map y le pasas las nuevas opciones de controles.

Modificar los controles

Debes especificar la presentación de un control cuando creas un mapa mediante determinados campos del objeto MapOptions del mapa. Estos campos se indican a continuación:

• cameraControl habilita o inhabilita el control de la cámara que permite al usuario hacer zoom y desplazar el mapa. Este control es visible de forma predeterminada en todos los mapas. Además, el campo cameraControlOptions especifica el CameraControlOptions que se usará para este control.
• mapTypeControl habilita o inhabilita el control de tipo de mapa que permite al usuario alternar entre distintos tipos de mapas (como mapa y satélite). De forma predeterminada, este control es visible y aparece en la esquina superior izquierda del mapa. Además, el campo mapTypeControlOptions especifica el MapTypeControlOptions que se usará para este control.
• streetViewControl habilita o inhabilita el control del hombrecito naranja que permite al usuario activar una panorámica de Street View. De forma predeterminada, este control está visible y aparece cerca de la esquina inferior derecha del mapa. Además, el campo streetViewControlOptions especifica el StreetViewControlOptions que se usará para este control.
• rotateControl habilita o inhabilita la aparición de un control de rotación para controlar la orientación de las imágenes en 3D. De forma predeterminada, la presencia del control se determina en función de la presencia o ausencia de imágenes en 3D para el tipo de mapa en cuestión conforme al nivel de zoom y la ubicación actuales. Puedes modificar el comportamiento del control si configuras las rotateControlOptions del mapa para especificar el RotateControlOptions que se usará. El control solo aparecerá en los mapas base en 3D.
• scaleControl habilita o inhabilita el control de escala, que proporciona una escala de mapa. De manera predeterminada, este control no es visible. Cuando se habilita, aparece siempre en la esquina inferior derecha del mapa. Además, el campo scaleControlOptions especifica el ScaleControlOptions que se usará para este control.
• fullscreenControl habilita o inhabilita el control que abre el mapa en modo de pantalla completa. Este control está habilitado de forma predeterminada en computadoras de escritorio y dispositivos Android. Cuando se habilita, el control aparece cerca de la esquina superior derecha del mapa. Además, el campo fullscreenControlOptions especifica el FullscreenControlOptions que se usará para este control.

Ten en cuenta que puedes especificar opciones para controles que deshabilites inicialmente.

Posicionamiento de los controles

La mayoría de las opciones de los controles contienen una propiedad position (del tipo ControlPosition) que indica en qué lugar del mapa se debe colocar el control. El posicionamiento de estos controles no es absoluto. Por el contrario, la API los distribuye de manera inteligente alrededor de los elementos existentes del mapa, o de otros controles, con determinadas limitaciones (como el tamaño del mapa).

Existen dos tipos de posiciones de control: heredadas y lógicas. Se recomienda usar valores lógicos para poder admitir automáticamente contextos de diseño de izquierda a derecha (LTR) y de derecha a izquierda (RTL). Consulta la guía de referencia.

En las siguientes tablas, se muestran las posiciones de control admitidas en contextos de LTR y RTL.

Haz clic en las etiquetas para alternar el mapa entre los modos LTR y RTL.

Ten en cuenta que estas posiciones pueden coincidir con posiciones de elementos de la IU cuyas disposiciones no pueden modificarse (como los derechos de autor y el logotipo de Google). En estos casos, los controles se dispondrán según la lógica determinada para cada posición y aparecerán lo más cerca posible de las posiciones indicadas. No se puede garantizar que los controles no se superpondrán en los diseños complejos, aunque la API intentará disponerlos de manera inteligente.

En el siguiente ejemplo, se muestra un mapa básico con todos los controles habilitados en diferentes posiciones.

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

Además de modificar el estilo y la posición de los controles de API existentes, puedes crear tus propios controles para manejar la interacción con el usuario. Los controles son widgets fijos que se colocan encima de un mapa en posiciones absolutas, a diferencia de las superposiciones, que se mueven con el mapa subyacente. Básicamente, un control es un elemento <div> que tiene una posición absoluta en el mapa, le muestra alguna opción de la IU al usuario y controla la interacción con el usuario o el mapa, en general, mediante un controlador de eventos.

Para crear tu propio control personalizado, debes seguir algunas reglas. No obstante, los siguientes lineamientos pueden servirte como prácticas recomendadas:

• Define el estilo CSS correspondiente para que se muestren los elementos de control.
• Controla la interacción con el usuario o el mapa a través de controladores de eventos para los cambios de propiedades del mapa o los eventos de usuarios (por ejemplo, eventos 'click').
• Crea un elemento <div> para contener el control y agrega este elemento a la propiedad controls de Map.

Todos estos asuntos se tratan a continuación.

Cómo dibujar controles personalizados

La manera en que dibujes tu control depende de ti. En general, recomendamos colocar toda la presentación del control en un solo elemento <div> para poder manipular ese control como una unidad. Usaremos este patrón de diseño en los ejemplos que se muestran a continuación.

Para diseñar controles atractivos, es necesario tener algunos conocimientos sobre la estructura del DOM y CSS. En los siguientes ejemplos de código, se muestra cómo agregar un control personalizado con métodos declarativos de HTML y programáticos.

CSS declarativo

Los siguientes diseños CSS proporcionan una apariencia coherente con los controles predeterminados. Usa estos estilos con los dos ejemplos que se muestran a continuación:

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

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

HTML declarativo

En estos fragmentos de código, se muestra cómo crear un control personalizado de forma declarativa. En el código HTML, se usa un DIV con el ID container para posicionar el control. Este se anida dentro del elemento gmp-map y el botón se agrega al DIV. El atributo slot se establece en control-inline-start-block-start para posicionar el control en la esquina superior izquierda del mapa.

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

En JavaScript, se usa getElementById() para encontrar el botón y el elemento DIV, se agrega un objeto de escucha de eventos al botón y se agrega el botón al elemento DIV.

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

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

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

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

JavaScript programático

En este fragmento de código, se muestra cómo crear un control de botón de forma programática. Los estilos CSS se definen más arriba.

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

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

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

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

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

Cómo controlar eventos desde controles personalizados

Para que un control sea útil, realmente debe tener una función. Tú decides qué función cumple cada control. Pueden responder a las entradas de los usuarios o a los cambios en el estado de Map.

Para responder a las entradas de los usuarios, usa addEventListener(), que controla los eventos del DOM admitidos. En el siguiente fragmento de código, se agrega un objeto de escucha para el evento 'click' del navegador. Ten en cuenta que este evento se recibe del DOM, no del 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);
});

Cómo lograr que los controles personalizados sean accesibles

Para asegurarte de que los controles reciban eventos del teclado y se muestren correctamente en los lectores de pantalla, haz lo siguiente:

• Usa siempre elementos HTML nativos para botones, elementos de formulario y etiquetas. Usa un elemento DIV solo como contenedor para los controles nativos. Nunca reutilices un DIV como un elemento interactivo de la IU.
• Usa el elemento label, el atributo title o el atributo aria-label cuando corresponda para proporcionar información sobre un elemento de la IU.

Cómo posicionar controles personalizados

Usa el atributo slot para posicionar controles personalizados y especificar la posición del control necesaria. Para obtener información sobre estas posiciones, consulta Posicionamiento de los controles más arriba.

Cada ControlPosition almacena un MVCArray de los controles que se muestran en esa posición. Como resultado, cuando se agregan controles a una posición o se quitan de allí, la API los actualiza según corresponde.

En el siguiente código, se crea un nuevo control personalizado (no se muestra su constructor) y se lo agrega al mapa en la posición BLOCK_START_INLINE_END (esquina superior derecha en el contexto de LTR).

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

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

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

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

Para establecer la posición de un control personalizado de forma declarativa, configura el atributo slot en el código HTML:

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

Ejemplo de un control personalizado

El siguiente control es simple (aunque no resulta particularmente útil) y en él se combinan los patrones que se explican más arriba. Este control responde a eventos 'click' del DOM y centra el mapa en una ubicación predeterminada:

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

Cómo agregar estados a los controles

En los controles también pueden almacenarse estados. El siguiente ejemplo se asemeja al que se muestra más arriba, pero el control contiene un botón "Centrar mapa en casa" adicional que configura el control de modo que exhiba una nueva ubicación principal. Para ello, creamos una propiedad home_ en el control, que permite almacenar dicho estado y proporcionar métodos get y set para este.

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