Controles

Selecciona la plataforma: Android iOS JavaScript

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:

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 forma predeterminada en la esquina inferior derecha del mapa.
  • 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 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 oblicuas. Este control aparece de forma 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 que indica la escala del mapa. Este control está inhabilitado de forma 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 admite la función de pantalla completa. Por lo tanto, este control 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 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 está activado de forma 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:

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;
index.ts

JavaScript

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

window.initMap = initMap;
index.js
Ver ejemplo

Prueba la muestra

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:

{
  zoomControl: 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 zoom está 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 Sí
>= 200 x 200 px undefined Sí
< 200 x 200p x undefined No

En el siguiente ejemplo, se configura el mapa para que se oculte el control de zoom y se muestre el control de escala. Ten en cuenta que la IU predeterminada no se inhabilita de forma explícita, 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;
index.ts

JavaScript

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

window.initMap = initMap;
index.js
Ver ejemplo

Prueba la muestra

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

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;
index.ts

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;
index.js
Ver ejemplo

Prueba la muestra

Los controles normalmente se configuran cuando se crea 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.

Cómo 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:

  • 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 las ZoomControlOptions que se usarán 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 las MapTypeControlOptions que se usarán 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 las StreetViewControlOptions que se usarán para este control.
  • rotateControl habilita o inhabilita el aspecto 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 en función de la presencia o ausencia de imágenes a 45° 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 las RotateControlOptions que se usarán. No es posible mostrar el control si no hay imágenes a 45° disponibles en ese momento.
  • scaleControl habilita o inhabilita el control de escala, que proporciona una escala de mapa simple. De forma predeterminada, este control no es visible. Cuando se habilita, aparece siempre en la esquina inferior derecha del mapa. Además, el campo scaleControlOptions especifica las ScaleControlOptions que se usarán 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, aparece cerca de la esquina superior derecha del mapa. Además, el campo fullscreenControlOptions especifica las FullscreenControlOptions que se usarán para este control.

Ten en cuenta que puedes especificar opciones para los controles que inhabilitaste 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).

Nota: No se puede garantizar que los controles no se superpondrán en los diseños complejos, aunque la API intentará disponerlos de manera inteligente.

Se admiten las siguientes posiciones de controles:

  • TOP_CENTER indica que el control se debe colocar en la parte superior central del mapa.
  • TOP_LEFT indica que el control se debe colocar en la parte superior izquierda del mapa, y los elementos secundarios se deben distribuir cerca de la parte superior central.
  • TOP_RIGHT indica que el control se debe colocar en la parte superior derecha del mapa, y los elementos secundarios se deben distribuir cerca de la parte superior central.
  • LEFT_TOP indica que el control se debe colocar en la parte superior izquierda del mapa, pero debajo de los elementos TOP_LEFT.
  • RIGHT_TOP indica que el control se debe colocar en la parte superior derecha del mapa, pero debajo de los elementos TOP_RIGHT.
  • LEFT_CENTER indica que el control se debe colocar en el lado izquierdo del mapa, centrado entre las posiciones TOP_LEFT y BOTTOM_LEFT.
  • RIGHT_CENTER indica que el control se debe colocar en el lado derecho del mapa, centrado entre las posiciones TOP_RIGHT y BOTTOM_RIGHT.
  • LEFT_BOTTOM indica que el control se debe colocar en la parte inferior izquierda del mapa, pero encima de los elementos BOTTOM_LEFT.
  • RIGHT_BOTTOM indica que el control se debe colocar en la parte inferior derecha del mapa, pero encima de los elementos BOTTOM_RIGHT.
  • BOTTOM_CENTER indica que el control se debe colocar en la parte inferior central del mapa.
  • BOTTOM_LEFT indica que el control se debe colocar en la parte inferior izquierda del mapa, y los elementos secundarios se deben distribuir cerca de la parte inferior central.
  • BOTTOM_RIGHT indica que el control se debe colocar en la parte inferior derecha del mapa, y los elementos secundarios se deben distribuir cerca de la parte inferior central.

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.

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;
index.ts

JavaScript

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

window.initMap = initMap;
index.js
Ver ejemplo

Prueba 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 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.

Cada uno de estos puntos se describe a continuación.

Cómo dibujar controles personalizados

La manera en que dibujes un 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 el siguiente código, se muestra una función para crear un elemento de botón que desplaza lateralmente el mapa para que se centre 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 con controles personalizados

Para que un control sea útil, 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 proviene 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 los controles personalizados

Para posicionar los controles personalizados en el mapa, debes colocarlos en las posiciones adecuadas en la propiedad controls del objeto Map. Esta propiedad contiene un array de elementos de google.maps.ControlPosition. Para incluir un control personalizado en el 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 una posición o se quitan de allí, la API los actualiza según corresponde.

La API coloca controles en cada posición según el orden de una propiedad index. Los controles con índices más bajos se colocan primero. Por ejemplo, si hay dos controles personalizados en la posición BOTTOM_RIGHT, estos se dispondrán de acuerdo con el orden del índice, según el cual se priorizan los valores más bajos. De forma predeterminada, todos los controles personalizados se ubican después de los controles predeterminados de la API. Para anular este comportamiento, debes configurar la propiedad index de un control como un valor negativo. Los controles personalizados no pueden colocarse a la izquierda del logotipo ni a la derecha de los derechos de autor.

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

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;
index.ts

JavaScript

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

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

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

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

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

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js
Ver ejemplo

Prueba la muestra

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.

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

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

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

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

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

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

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

JavaScript

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

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

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

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

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

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

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

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js
Ver ejemplo

Prueba la muestra