Controlli

Panoramica dei controlli

Le mappe visualizzate tramite l'API Maps JavaScript contengono elementi dell'interfaccia utente per consentire l'interazione dell'utente con la mappa. Questi elementi sono noti come controlli e puoi includere variazioni di questi controlli nella tua applicazione. In alternativa, puoi non fare nulla e lasciare che l'API Maps JavaScript gestisca tutto il comportamento dei controlli.

La mappa seguente mostra il set predefinito di controlli visualizzati dall'API Maps JavaScript:

In senso orario da in alto a sinistra: Tipo di mappa, Schermo intero, Videocamera, Street View, Scorciatoie da tastiera.

Di seguito è riportato un elenco completo dei controlli che puoi utilizzare nelle tue mappe:

• Il controllo Tipo di mappa è disponibile in un menu a discesa o in una barra dei pulsanti orizzontale, che consente all'utente di scegliere un tipo di mappa (ROADMAP, SATELLITE, HYBRID o TERRAIN). Questo controllo viene visualizzato per impostazione predefinita nell'angolo in alto a sinistra della mappa.
• Il controllo a schermo intero offre la possibilità di aprire la mappa in modalità a schermo intero. Questo controllo è attivo per impostazione predefinita su computer e dispositivi mobili. Nota:iOS non supporta la funzionalità a schermo intero. Il controllo a schermo intero non è quindi visibile sui dispositivi iOS.
• La funzionalità Controllo fotocamera include i controlli di zoom e panoramica.
• Il controllo Street View contiene un'icona di Pegman che può essere trascinata sulla mappa per attivare Street View. Questo controllo viene visualizzato per impostazione predefinita vicino all'angolo in basso a destra della mappa.
• Il controllo di rotazione offre una combinazione di opzioni di inclinazione e rotazione per le mappe contenenti immagini 3D. Questo controllo viene visualizzato per impostazione predefinita vicino all'angolo in basso a destra della mappa. Per saperne di più, consulta la panoramica 3D.
• Il controllo scala mostra un elemento della scala della mappa. Questo controllo è disattivato per impostazione predefinita.
• Il controllo Scorciatoie da tastiera mostra un elenco di scorciatoie da tastiera per interagire con la mappa.

Non accedere o modificare direttamente questi controlli della mappa. Modifica invece i campi MapOptions della mappa, che influiscono sulla visibilità e sulla presentazione dei controlli. Puoi regolare la presentazione dei controlli al momento dell'istanza della mappa (con MapOptions appropriato) o modificare una mappa in modo dinamico chiamando setOptions() per modificare le opzioni della mappa.

Non tutti questi controlli sono attivati per impostazione predefinita. Per scoprire di più sul comportamento dell'interfaccia utente predefinita (e su come modificarlo), consulta L'interfaccia utente predefinita di seguito.

Interfaccia utente predefinita

Per impostazione predefinita, tutti i controlli scompaiono se la mappa è troppo piccola (200 x 200 px). Puoi ignorare questo comportamento impostando esplicitamente il controllo in modo che sia visibile. Consulta la sezione Aggiunta di controlli alla mappa.

Il comportamento e l'aspetto dei controlli sono gli stessi su dispositivi mobili e computer, ad eccezione del controllo a schermo intero (vedi il comportamento descritto nell'elenco dei controlli).

Inoltre, la gestione della tastiera è attiva per impostazione predefinita su tutti i dispositivi.

Disattiva l'interfaccia utente predefinita

Potresti voler disattivare completamente i pulsanti dell'interfaccia utente predefinita dell'API. Per farlo, imposta la proprietà disableDefaultUI della mappa (all'interno dell'oggetto MapOptions) su true. Questa proprietà disattiva tutti i pulsanti di controllo dell'interfaccia utente dell'API Maps JavaScript. Tuttavia, non influisce sui movimenti del mouse o sulle scorciatoie da tastiera sulla mappa di base, che sono controllati rispettivamente dalle proprietà gestureHandling e keyboardShortcuts.

Il seguente codice disattiva i pulsanti della UI:

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

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

Aggiungere controlli alla mappa

Potresti voler personalizzare l'interfaccia rimuovendo, aggiungendo o modificando il comportamento o i controlli dell'interfaccia utente e assicurarti che gli aggiornamenti futuri non alterino questo comportamento. Se vuoi solo aggiungere o modificare il comportamento esistente, devi assicurarti che il controllo venga aggiunto esplicitamente alla tua applicazione.

Alcuni controlli vengono visualizzati sulla mappa per impostazione predefinita, mentre altri non vengono visualizzati a meno che tu non li richieda specificamente. L'aggiunta o la rimozione dei controlli dalla mappa è specificata nei seguenti campi dell'oggetto MapOptions, che imposti su true per renderli visibili o su false per nasconderli:

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

Per impostazione predefinita, tutti i controlli scompaiono se la mappa è più piccola di 200 x 200 px. Puoi ignorare questo comportamento impostando esplicitamente il controllo in modo che sia visibile. Ad esempio, la seguente tabella mostra se il controllo della videocamera è visibile o meno, in base alle dimensioni della mappa e all'impostazione del campo cameraControl:

L'esempio seguente imposta la mappa in modo da nascondere il controllo della videocamera e visualizzare il controllo della scala. Tieni presente che non disattiviamo esplicitamente l'UI predefinita, quindi queste modifiche si aggiungono al comportamento dell'UI predefinita.

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

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

Opzioni di controllo

Diversi controlli sono configurabili, il che ti consente di modificarne il comportamento o l'aspetto. Il controllo Tipo di mappa, ad esempio, può essere visualizzato come una barra orizzontale o un menu a discesa.

Questi controlli vengono modificati alterando i campi delle opzioni di controllo appropriati all'interno dell'oggetto MapOptions al momento della creazione della mappa.

Ad esempio, le opzioni per modificare il controllo Tipo di mappa sono indicate nel campo mapTypeControlOptions. Il controllo Tipo di mappa può essere visualizzato in una delle seguenti opzioni style:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR mostra l'array di controlli come pulsanti in una barra orizzontale, come mostrato su Google Maps.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU mostra un singolo controllo pulsante che ti consente di selezionare il tipo di mappa utilizzando un menu a discesa.
• google.maps.MapTypeControlStyle.DEFAULT mostra il comportamento predefinito, che dipende dalle dimensioni dello schermo e potrebbe cambiare nelle versioni future dell'API.

Tieni presente che, se modifichi le opzioni di controllo, devi attivare esplicitamente il controllo impostando il valore MapOptions appropriato su true. Ad esempio, per impostare un controllo del tipo di mappa in modo che mostri lo stile DROPDOWN_MENU, utilizza il seguente codice all'interno dell'oggetto MapOptions:

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

L'esempio seguente mostra come modificare la posizione e lo stile predefiniti dei controlli.

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

I controlli vengono in genere configurati al momento della creazione della mappa. Tuttavia, puoi modificare la presentazione dei controlli in modo dinamico chiamando il metodo setOptions() di Map e passando nuove opzioni di controllo.

Modifica controlli

Specifichi la presentazione di un controllo quando crei la mappa tramite i campi all'interno dell'oggetto MapOptions della mappa. Questi campi sono indicati di seguito:

• cameraControl attiva/disattiva il controllo della videocamera che consente all'utente di eseguire lo zoom e la panoramica della mappa. Questo controllo è visibile per impostazione predefinita su tutte le mappe. Il campo cameraControlOptions specifica inoltre il CameraControlOptions da utilizzare per questo controllo.
• mapTypeControl attiva/disattiva il controllo Tipo di mappa che consente all'utente di alternare i tipi di mappa (ad esempio Mappa e Satellite). Per impostazione predefinita, questo controllo è visibile e viene visualizzato nell'angolo in alto a sinistra della mappa. Il campo mapTypeControlOptions specifica inoltre il MapTypeControlOptions da utilizzare per questo controllo.
• streetViewControl attiva/disattiva il controllo Pegman che consente all'utente di attivare un panorama di Street View. Per impostazione predefinita, questo controllo è visibile e viene visualizzato in basso a destra della mappa. Il campo streetViewControlOptions specifica inoltre il StreetViewControlOptions da utilizzare per questo controllo.
• rotateControl attiva/disattiva la visualizzazione di un controllo di rotazione per controllare l'orientamento delle immagini 3D. Per impostazione predefinita, la presenza del controllo è determinata dalla presenza o dall'assenza di immagini 3D per il tipo di mappa specificato al livello di zoom e nella posizione attuali. Puoi modificare il comportamento del controllo impostando rotateControlOptions della mappa per specificare RotateControlOptions da utilizzare. Il controllo viene visualizzato solo sulle mappe base 3D.
• scaleControl attiva/disattiva il controllo Scala che fornisce una scala della mappa. Per impostazione predefinita, questo controllo non è visibile. Se attivata, verrà sempre visualizzata nell'angolo in basso a destra della mappa. Il scaleControlOptions specifica inoltre il ScaleControlOptions da utilizzare per questo controllo.
• fullscreenControl attiva/disattiva il controllo che apre la mappa in modalità a schermo intero. Per impostazione predefinita, questo controllo è attivo su computer e dispositivi Android. Se abilitato, il controllo viene visualizzato in alto a destra sulla mappa. Il fullscreenControlOptions specifica inoltre il FullscreenControlOptions da utilizzare per questo controllo.

Tieni presente che puoi specificare le opzioni per i controlli che disattivi inizialmente.

Posizionamento dei controlli

La maggior parte delle opzioni di controllo contiene una proprietà position (di tipo ControlPosition) che indica in quale punto della mappa posizionare il controllo. Il posizionamento di questi controlli non è assoluto. Al contrario, l'API disporrà i controlli in modo intelligente, facendoli scorrere intorno agli elementi della mappa esistenti o ad altri controlli, entro i vincoli dati (ad esempio le dimensioni della mappa).

Esistono due tipi di posizioni di controllo: legacy e logiche. L'utilizzo di valori logici è consigliato per poter supportare automaticamente i contesti di layout da sinistra a destra (LTR) e da destra a sinistra (RTL). Consulta la guida di riferimento.

Le tabelle seguenti mostrano le posizioni dei controlli supportate nei contesti LTR e RTL.

Fai clic sulle etichette per passare dalla modalità da sinistra a destra a quella da destra a sinistra e viceversa.

Tieni presente che queste posizioni potrebbero coincidere con quelle degli elementi dell'interfaccia utente di cui non puoi modificare i posizionamenti (ad esempio copyright e logo Google). In questi casi, i controlli seguiranno la logica indicata per ogni posizione e verranno visualizzati il più vicino possibile alla posizione indicata. Non è possibile garantire che i controlli non si sovrappongano a causa di layout complessi, anche se l'API tenterà di disporli in modo intelligente.

L'esempio seguente mostra una mappa di base con tutti i controlli attivati, in posizioni diverse.

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

Controlli personalizzati

Oltre a modificare lo stile e la posizione dei controlli API esistenti, puoi creare controlli personalizzati per gestire l'interazione con l'utente. I controlli sono widget fissi che fluttuano sopra una mappa in posizioni assolute, a differenza degli overlay, che si muovono con la mappa sottostante. Più fondamentalmente, un controllo è un elemento <div> che ha una posizione assoluta sulla mappa, mostra all'utente un'interfaccia utente e gestisce l'interazione con l'utente o la mappa, di solito tramite un gestore di eventi.

Per creare un controllo personalizzato, sono necessarie poche regole. Tuttavia, le seguenti linee guida possono fungere da best practice:

• Definisci il CSS appropriato per visualizzare gli elementi di controllo.
• Gestisci l'interazione con l'utente o la mappa tramite i gestori di eventi per le modifiche alle proprietà della mappa o gli eventi utente (ad esempio, eventi 'click').
• Crea un elemento <div> per contenere il controllo e aggiungi questo elemento alla proprietà controls di Map.

Ciascuna di queste preoccupazioni è discussa di seguito.

Disegnare controlli personalizzati

Il modo in cui disegni il controllo dipende da te. In genere, ti consigliamo di inserire tutta la presentazione del controllo all'interno di un unico elemento <div> in modo da poter manipolare il controllo come un'unica unità. Utilizzeremo questo pattern di progettazione negli esempi mostrati di seguito.

La progettazione di controlli accattivanti richiede una certa conoscenza di CSS e della struttura DOM. Gli esempi di codice seguenti mostrano l'aggiunta di un controllo personalizzato utilizzando metodi HTML dichiarativi e programmatici.

CSS dichiarativo

I seguenti stili CSS forniscono un aspetto coerente con i controlli predefiniti. Utilizza questi stili con entrambi gli esempi riportati di seguito:

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

Questi snippet di codice mostrano come creare un controllo personalizzato in modo dichiarativo. Nell'HTML, un DIV con l'ID container viene utilizzato per posizionare il controllo. Questo è nidificato all'interno dell'elemento gmp-map e il pulsante viene aggiunto al DIV. L'attributo slot è impostato su control-inline-start-block-start per posizionare il controllo nell'angolo in alto a sinistra della mappa.

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

In JavaScript, getElementById() viene utilizzato per trovare il DIV e il pulsante, al pulsante viene aggiunto un listener di eventi e il pulsante viene aggiunto al 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 programmatico

Questo snippet di codice mostra la creazione programmatica di un controllo pulsante. Gli stili CSS sono definiti sopra.

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

Gestire gli eventi dai controlli personalizzati

Affinché un controllo sia utile, deve effettivamente fare qualcosa. La funzione del controllo dipende da te. Il controllo può rispondere all'input dell'utente o alle modifiche dello stato di Map.

Per rispondere all'input utente, utilizza addEventListener(), che gestisce gli eventi DOM supportati. Il seguente snippet di codice aggiunge un listener per l'evento 'click' del browser. Tieni presente che questo evento viene ricevuto dal DOM, non dalla mappa.

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

Rendere accessibili i controlli personalizzati

Per assicurarti che i controlli ricevano eventi da tastiera e vengano visualizzati correttamente dagli screen reader:

• Utilizza sempre elementi HTML nativi per pulsanti, elementi del modulo ed etichette. Utilizza solo un elemento DIV come contenitore per i controlli nativi; non riutilizzare mai un elemento DIV come elemento UI interattivo.
• Utilizza l'elemento label, l'attributo title o l'attributo aria-label, se appropriato, per fornire informazioni su un elemento dell'interfaccia utente.

Posizionare i controlli personalizzati

Utilizza l'attributo slot per posizionare i controlli personalizzati, specificando la posizione del controllo necessaria. Per informazioni su queste posizioni, vedi Posizionamento dei controlli sopra.

Ogni ControlPosition memorizza un MVCArray dei controlli visualizzati in quella posizione. Di conseguenza, quando i controlli vengono aggiunti o rimossi dalla posizione, l'API aggiornerà i controlli di conseguenza.

Il seguente codice crea un nuovo controllo personalizzato (il relativo costruttore non è mostrato) e lo aggiunge alla mappa nella posizione BLOCK_START_INLINE_END (in alto a destra nel contesto 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);

Per impostare la posizione di un controllo personalizzato in modo dichiarativo, imposta l'attributo slot nell'HTML:

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

Esempio di controllo personalizzato

Il seguente controllo è semplice (anche se non particolarmente utile) e combina i pattern mostrati sopra. Questo controllo risponde agli eventi DOM 'click' centrando la mappa in una determinata posizione predefinita:

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

Aggiungere lo stato ai controlli

I controlli possono anche memorizzare lo stato. L'esempio seguente è simile a quello mostrato in precedenza, ma il controllo contiene un pulsante aggiuntivo "Imposta casa" che imposta il controllo in modo che mostri una nuova posizione della casa. A questo scopo, creiamo una proprietà home_ all'interno del controllo per memorizzare questo stato e forniamo getter e setter per questo stato.

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