Controles

Seleccionar plataforma: Android iOS JavaScript

Información general sobre los controles

Los mapas que se muestran a través de la API de Maps JavaScript contienen elementos de la IU que permiten la interacción del usuario con el mapa. Estos elementos se conocen como controles y puedes incluir variaciones de ellos en tu aplicación. Como alternativa, no puedes hacer nada y permitir que la API de Maps JavaScript maneje todo el comportamiento de control.

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

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

  • El control de zoom muestra los botones "+" y " para cambiar el nivel de zoom del mapa. Este control aparece de manera predeterminada en la esquina inferior derecha del mapa.
  • El control de tipo de mapa está disponible en un estilo de barra de botones desplegable o desplegable, lo que 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 Street View contiene un ícono del hombrecito naranja que se puede arrastrar al mapa para habilitar Street View. Este control aparece de manera predeterminada cerca de la esquina inferior derecha del mapa.
  • El control de rotación proporciona una combinación de opciones de inclinación y rotación para los mapas que contienen imágenes oblicuas. Este control aparece de manera predeterminada cerca de la esquina inferior derecha del mapa. Consulta imágenes a 45° para obtener más información.
  • El Control de escala muestra un elemento de escala de mapa. Este control viene desactivado de manera predeterminada.
  • 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 es compatible con la función de pantalla completa. Por lo tanto, el control de pantalla completa no es visible en dispositivos iOS.
  • El control de combinaciones de teclas muestra una lista de combinaciones de teclas para interactuar con el mapa.

No puedes acceder a estos controles del mapa ni modificarlos directamente. En su lugar, modifica los campos MapOptions del mapa que afectan la visibilidad y la presentación de los controles. Puedes ajustar la presentación de control al crear instancias de tu mapa (con el MapOptions apropiado), o modificar un mapa de forma dinámica llamando a setOptions() para cambiar las opciones del mapa.

No todos estos controles vienen habilitados de manera 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

En forma predeterminada, todos los controles desaparecen si el mapa es demasiado pequeño (200 x 200 px). Para anular este comportamiento, configura explícitamente el control para que sea visible. Consulta Cómo agregar controles al mapa.

El comportamiento y el aspecto de los controles es el mismo en dispositivos móviles y de escritorio, excepto en 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 deshabilitar la IU predeterminada

Es posible que desees desactivar por completo los botones de la IU predeterminada de la API. Para ello, establece la propiedad disableDefaultUI del mapa (dentro del objeto MapOptions) en 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 del mapa base, que se controlan mediante las propiedades gestureHandling y keyboardShortcuts, respectivamente.

El siguiente código inhabilita los botones de la 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 ejemplo

Probar la muestra

Cómo agregar controles al mapa

Es posible que desees adaptar tu interfaz quitando, agregando o modificando el comportamiento o los controles de la IU y asegurarte de que las actualizaciones futuras no alteren este comportamiento. Si solo deseas agregar o modificar el comportamiento existente, debes asegurarte de que el control se agregue de forma explícita a tu aplicación.

Algunos controles aparecen en el mapa de forma predeterminada, mientras que otros no se muestran, a menos que lo solicites específicamente. La adición o eliminación de controles del mapa se especifica en los siguientes campos de objeto MapOptions, que estableces en true para que sean visibles, o en false a fin de ocultarlos:

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

En forma predeterminada, todos los controles desaparecen si el mapa tiene un tamaño inferior a 200 x 200 px. Para anular este comportamiento, configura explícitamente el control para que sea visible. Por ejemplo, en la siguiente tabla, se muestra si el control de zoom es visible o no, según el tamaño del mapa y la configuración del campo zoomControl:

Tamaño del mapa zoomControl ¿Visible?
Cualquiera false No
Cualquiera true
>= 200x200px undefined
200x200 px undefined No

En el siguiente ejemplo, se configura el mapa para ocultar el control de zoom y mostrar 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.

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 ejemplo

Probar la muestra

Opciones de control

Varios controles son configurables, lo que te permite alterar su comportamiento o cambiar su apariencia. El control de tipo de mapa, por ejemplo, puede aparecer como una barra horizontal o un menú desplegable.

Estos controles se modifican mediante la modificación de los campos de opciones de control adecuados dentro del objeto MapOptions cuando se crea el mapa.

Por ejemplo, las opciones para alterar el control 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 arreglo de controles como botones en una barra horizontal, como se muestra en Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU muestra un solo control de botón que te permite seleccionar el tipo de mapa mediante 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 control, también debes habilitar explícitamente el control configurando el valor MapOptions apropiado en true. Por ejemplo, para configurar un control de tipo de mapa a fin de que muestre el estilo DROPDOWN_MENU, usa el siguiente código dentro del objeto MapOptions:

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

En el siguiente ejemplo, se muestra cómo cambiar la posición predeterminada y el estilo de los 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 ejemplo

Probar la muestra

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 nuevas opciones de control.

Cómo modificar los controles

Debes especificar una presentación de control cuando creas tu mapa mediante campos dentro del objeto MapOptions del mapa. Estos campos se indican a continuación:

  • zoomControl habilita o inhabilita el control de zoom. De forma predeterminada, este control es visible y aparece cerca de la esquina inferior derecha del mapa. Además, el campo zoomControlOptions especifica el ZoomControlOptions que se usará para este control.
  • mapTypeControl habilita o inhabilita el control de tipo de mapa que permite al usuario alternar entre 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 es 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 apariencia de un control de rotación para controlar la orientación de las imágenes a 45°. De forma predeterminada, la presencia del control se determina por la presencia o ausencia de imágenes a 45° para el tipo de mapa determinado con el zoom y la ubicación actuales. Puedes modificar el comportamiento del control configurando el rotateControlOptions del mapa para especificar el RotateControlOptions que se usará. No puedes hacer que el control aparezca si no hay imágenes a 45° disponibles.
  • scaleControl habilita o inhabilita el control de escala que proporciona una escala de mapa simple. De manera predeterminada, este control no es visible. Cuando se habilite, siempre aparecerá en la esquina inferior derecha del mapa. El scaleControlOptions también especifica el ScaleControlOptions que se usará para este control.
  • fullscreenControl habilita o inhabilita el control que abre el mapa en modo de pantalla completa. De forma predeterminada, 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. El fullscreenControlOptions también 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 control 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. En cambio, la API distribuirá los controles de manera inteligente. Para ello, hará que se circulen por elementos de mapas existentes o bien otros controles, dentro de ciertas restricciones (como el tamaño del mapa).

Nota: No se pueden garantizar que los controles no pueden superponerse con determinados diseños complejos, aunque la API intentará organizarlos de manera inteligente.

Se admiten las siguientes posiciones de controles:

  • TOP_CENTER indica que el control debe colocarse en la parte superior central del mapa.
  • TOP_LEFT indica que el control debe colocarse en la parte superior izquierda del mapa, con subelementos “circulando” hacia la parte superior central.
  • TOP_RIGHT indica que el control debe colocarse en la parte superior derecha del mapa, con subelementos que fluyen hacia la parte superior central.
  • LEFT_TOP indica que el control debe colocarse en la parte superior izquierda del mapa, pero debajo de cualquier elemento TOP_LEFT.
  • RIGHT_TOP indica que el control debe colocarse en la parte superior derecha del mapa, pero debajo de cualquier elemento TOP_RIGHT.
  • LEFT_CENTER indica que el control debe colocarse en el lado izquierdo del mapa, centrado entre las posiciones TOP_LEFT y BOTTOM_LEFT.
  • RIGHT_CENTER indica que el control debe colocarse en el lado derecho del mapa, centrado entre las posiciones TOP_RIGHT y BOTTOM_RIGHT.
  • LEFT_BOTTOM indica que el control debe colocarse en la parte inferior izquierda del mapa, pero encima de cualquier elemento BOTTOM_LEFT.
  • RIGHT_BOTTOM indica que el control debe colocarse en la parte inferior derecha del mapa, pero encima de cualquier elemento BOTTOM_RIGHT.
  • BOTTOM_CENTER indica que el control debe colocarse en la parte inferior central del mapa.
  • BOTTOM_LEFT indica que el control debe colocarse en la parte inferior izquierda del mapa, con subelementos “circulando” hacia la parte inferior central.
  • BOTTOM_RIGHT indica que el control debe colocarse en la parte inferior derecha del mapa, con subelementos “circulando” hacia la parte inferior central.

Ten en cuenta que estas posiciones pueden coincidir con posiciones de elementos de IU cuyas posiciones no puedes modificar (como los derechos de autor y el logotipo de Google). En esos casos, los controles fluirán según la lógica observada para cada posición y aparecerán lo más cerca posible de la posición indicada.

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

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 ejemplo

Probar la muestra

Controles personalizados

Además de modificar el estilo y la posición de los controles de API existentes, puedes crear tus propios controles para controlar la interacción con el usuario. Los controles son widgets fijos que flotan sobre un mapa en posiciones absolutas, a diferencia de las superposiciones, que se mueven con el mapa subyacente. En esencia, un control es un elemento <div> que tiene una posición absoluta en el mapa, le muestra alguna IU al usuario y controla la interacción con el usuario o el mapa, por lo general, a través de un controlador de eventos.

Para crear tu propio control personalizado se necesitan pocas reglas. Sin embargo, los siguientes lineamientos pueden ser una práctica recomendada:

  • Definir la 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 propiedad del mapa o los eventos del usuario (por ejemplo, eventos 'click').
  • Crea un elemento <div> para mantener 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, te recomendamos colocar toda la presentación de control dentro de un solo elemento <div> para poder manipular el control como una unidad. Usaremos este patrón de diseño en los ejemplos que se muestran a continuación.

Diseñar controles atractivos requiere cierto conocimiento de CSS y la estructura del DOM. En el siguiente código, se muestra una función para crear un elemento de botón que desplaza lateralmente el mapa para centrar en 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;
}

Cómo manejar eventos de controles personalizados

Para que un control sea útil, realmente debe tener una función. Tú decides lo que hace el control. El control puede responder a las entradas del usuario o a los cambios en el estado de Map.

Para responder a las entradas del usuario, usa addEventListener(), que controla los eventos de DOM admitidos. El siguiente fragmento de código 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 hacer que los controles personalizados sean accesibles

Para asegurarte de que los controles reciban eventos del teclado y se muestren correctamente a 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 mantener los controles nativos; nunca vuelvas a usar un elemento 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

Los controles personalizados se posicionan en el mapa colocándolos en las posiciones adecuadas dentro de la propiedad controls del objeto Map. Esta propiedad contiene un arreglo de google.maps.ControlPosition. Para agregar un control personalizado al mapa, agrega Node (por lo general, <div>) a un ControlPosition adecuado. (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 la posición o se quitan de ella, la API los actualiza según corresponda.

La API coloca controles en cada posición según el orden de una propiedad index. Los controles con un índice inferior se colocan primero. Por ejemplo, se establecerán dos controles personalizados en la posición BOTTOM_RIGHT según este orden de índice, y prevalecerán los valores de índice más bajos. De forma predeterminada, todos los controles personalizados se ubican después de los controles predeterminados de API. Puedes anular este comportamiento si configuras una propiedad index de control como un valor negativo. Los controles personalizados no se pueden ubicar a la izquierda del logotipo ni a la derecha de los derechos de autor.

El siguiente código crea un nuevo control personalizado (no se muestra su constructor) y lo agrega al mapa en la posición 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);

Ejemplo de un control personalizado

El siguiente control es simple (aunque no es particularmente útil) y combina los patrones que se muestran arriba. Este control responde a eventos 'click' del DOM centrando el mapa en una ubicación predeterminada:

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 ejemplo

Probar la muestra

Cómo agregar estados a los controles

En los controles también pueden almacenarse estados. El siguiente ejemplo es similar al que se mostró antes, pero el control contiene un botón adicional "Set Home" que establece que el control exhiba una nueva ubicación de casa. Para ello, creamos una propiedad home_ dentro del control a fin de almacenar este estado y proporcionar métodos get y métodos set para ese 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 ejemplo

Probar la muestra