Commandes

Présentation des commandes

Les cartes affichées via l'API Maps JavaScript contiennent des éléments d'interface afin de permettre à l'utilisateur d'interagir avec la carte. Ces éléments sont appelés commandes et vous pouvez en inclure des variantes dans votre application. Vous pouvez également décider de ne rien faire et laisser l'API Maps JavaScript gérer la totalité du comportement des commandes.

La carte suivante montre l'ensemble de commandes par défaut affichées par l'API Maps JavaScript :

Dans le sens des aiguilles d'une montre, en partant du haut à gauche : Type de carte, Plein écran, Caméra, Street View, Raccourcis clavier.

Voici la liste de l'ensemble complet des commandes que vous pouvez utiliser dans vos cartes :

• La commande de type de carte est disponible dans un menu déroulant ou sous forme de barre de boutons horizontale. Elle permet de choisir un type de carte (ROADMAP, SATELLITE, HYBRID ou TERRAIN). Cette commande apparaît par défaut dans l'angle supérieur gauche de la carte.
• La commande de plein écran permet d'ouvrir la carte en mode plein écran. Cette commande est activée par défaut sur les ordinateurs et les appareils mobiles. Remarque : iOS n'est pas compatible avec le mode plein écran. La commande de plein écran n'est donc pas visible sur les appareils iOS.
• La fonctionnalité Contrôle de la caméra inclut des commandes de zoom et de panoramique.
• La commande Street View contient une icône de Pegman qu'il est possible de glisser sur la carte pour activer Street View. Cette commande apparaît par défaut dans la partie inférieure droite de la carte.
• La commande de rotation offre une combinaison d'options d'inclinaison et de rotation pour les cartes contenant des images 3D. Cette commande apparaît par défaut dans la partie inférieure droite de la carte. Pour en savoir plus, consultez Présentation de la 3D.
• La commande d'échelle affiche un élément d'échelle de carte. Cette commande est désactivée par défaut.
• La commande de raccourcis clavier affiche la liste des raccourcis clavier permettant d'interagir avec la carte.

Vous ne pouvez pas directement modifier ou accéder à ces commandes. En revanche, vous pouvez modifier les champs MapOptions de la carte afin de jouer sur la visibilité et la présentation des commandes. Vous pouvez ajuster la présentation des commandes lorsque vous instanciez votre carte (avec les MapOptions appropriées) ou modifier une carte de manière dynamique en appelant setOptions() afin de modifier les options de la carte.

Ces commandes ne sont pas toutes activées par défaut. Pour en savoir plus sur le comportement de l'interface utilisateur par défaut (et comment modifier ce comportement), consultez Interface utilisateur par défaut.

Interface utilisateur par défaut

Par défaut, toutes ces commandes disparaissent de la carte si celle-ci est trop petite (200 x 200 pixels). Vous pouvez annuler ce comportement en paramétrant explicitement cette commande afin de la rendre visible. Consultez Ajouter des commandes à la carte.

Le comportement et l'apparence des commandes sont les mêmes sur les appareils mobiles et les ordinateurs de bureau, à l'exception de la commande plein écran (voir le comportement décrit dans la liste des commandes).

En outre, la gestion du clavier est activée par défaut sur tous les appareils.

Désactiver l'interface utilisateur par défaut

Il est possible de désactiver entièrement les boutons de l'interface utilisateur par défaut de l'API. Pour ce faire, définissez la propriété disableDefaultUI de la carte (dans l'objet MapOptions) sur true. Cette propriété désactive tous les boutons de commande de l'interface utilisateur de l'API Maps JavaScript. Toutefois, elle n'affecte pas les gestes de la souris ni les raccourcis clavier sur la carte de base, qui sont contrôlés respectivement par les propriétés gestureHandling et keyboardShortcuts.

Le code suivant désactive les boutons de l'interface utilisateur :

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

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

Ajouter des commandes à la carte

Vous pouvez personnaliser votre interface en supprimant, ajoutant ou modifiant le comportement ou les commandes de l'UI. Vous pouvez également vous assurer que les mises à jour à venir n'auront pas d'impact sur ce comportement. Si vous souhaitez seulement ajouter ou modifier un comportement existant, vous devez veiller à ce que la commande soit ajoutée explicitement à votre application.

Certaines commandes sont affichées sur la carte par défaut, tandis que d'autres n'apparaissent pas si vous n'en faites pas la demande spécifique. L'ajout ou la suppression de commandes de la carte sont spécifiés dans les champs suivants de l'objet MapOptions, que vous définissez sur true pour les rendre visibles ou sur false pour les masquer :

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

Par défaut, toutes ces commandes disparaissent de la carte si celle-ci fait moins de 200 x 200 pixels. Vous pouvez annuler ce comportement en paramétrant explicitement cette commande afin de la rendre visible. Par exemple, le tableau suivant montre si la commande de caméra est visible ou pas en fonction de la taille de la carte et du paramétrage du champ cameraControl :

Dans l'exemple suivant, la carte est paramétrée de manière à masquer la commande de caméra et à afficher la commande d'échelle. Notez que l'interface utilisateur par défaut n'est pas désactivée explicitement. Ces modifications viennent donc s'ajouter au comportement de l'interface utilisateur par défaut.

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

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

Options de commande

Plusieurs options peuvent être configurées, ce qui vous permet de modifier leur comportement ou de changer leur apparence. La commande de type de carte, par exemple, peut apparaître sous forme de barre horizontale ou de menu déroulant.

Ces commandes sont modifiées en changeant les champs des options de commande dans l'objet MapOptions lors de la création de la carte.

Par exemple, les options qui modifient la commande de type de carte se trouvent dans le champ mapTypeControlOptions. La commande de type de carte peut apparaître dans l'une des options style suivantes :

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR affiche la série de commandes sous forme de boutons dans une barre horizontale, comme dans Google Maps.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU affiche une commande à un seul bouton permettant de sélectionner le type de carte à partir d'un menu déroulant.
• google.maps.MapTypeControlStyle.DEFAULT affiche le comportement par défaut, qui dépend de la taille de l'écran et qui peut être amené à changer dans les futures versions de l'API.

Notez que si vous modifiez des options de commande, vous devez aussi activer la commande explicitement en définissant la valeur MapOptions appropriée sur true. Par exemple, pour paramétrer une commande de type de carte afin d'afficher le style DROPDOWN_MENU, utilisez le code suivant dans l'objet MapOptions :

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

L'exemple suivant montre comment modifier la position et le style par défaut des commandes.

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

Les commandes sont généralement configurées lors de la création de la carte. Cependant, vous pouvez modifier la présentation des commandes de manière dynamique en appelant la méthode setOptions() de Map et en spécifiant de nouvelles options.

Modifier les commandes

Vous spécifiez la présentation d'une commande lorsque vous créez votre carte grâce à des champs se trouvant dans l'objet MapOptions de la carte. Ces champs sont décrits ci-dessous :

• cameraControl active/désactive la commande de caméra qui permet à l'utilisateur de zoomer et de faire un panoramique sur la carte. Cette commande est visible par défaut sur toutes les cartes. Le champ cameraControlOptions spécifie également le CameraControlOptions à utiliser pour cette commande.
• mapTypeControl active/désactive la commande de type de carte qui permet à l'utilisateur de basculer entre les différents types de carte (comme Map et Satellite). Par défaut, cette commande est visible et apparaît dans l'angle supérieur gauche de la carte. Le champ mapTypeControlOptions spécifie en outre le MapTypeControlOptions à utiliser pour cette commande.
• streetViewControl active/désactive la commande Pegman qui permet à l'utilisateur d'activer un panorama Street View. Par défaut, cette commande est visible et apparaît dans la partie inférieure droite de la carte. Le champ streetViewControlOptions spécifie en outre le StreetViewControlOptions à utiliser pour cette commande.
• rotateControl active/désactive l'affichage de la commande de rotation permettant de contrôler l'orientation des images 3D. Par défaut, l'affichage de la commande est déterminé par la présence ou l'absence d'images 3D pour le type de carte donné au niveau de zoom et au lieu actuels. Vous pouvez modifier le comportement de la commande en définissant les rotateControlOptions de la carte pour spécifier les RotateControlOptions à utiliser. Il n'apparaît que sur les cartes de base en 3D.
• scaleControl active/désactive la commande d'échelle qui fournit une échelle de carte. Cette commande n'est pas visible par défaut. Lorsqu'elle est activée, elle apparaît toujours dans l'angle inférieur droit de la carte. Les scaleControlOptions spécifient en outre les ScaleControlOptions à utiliser pour cette commande.
• fullscreenControl active/désactive la commande qui ouvre la carte en mode plein écran. Par défaut, elle est activée par défaut sur les ordinateurs et les appareils Android. Lorsqu'elle est activée, la commande apparaît près du coin supérieur droit de la carte. Les fullscreenControlOptions spécifient en outre les FullscreenControlOptions à utiliser pour cette commande.

Notez que vous pouvez spécifier des options pour des commandes que vous avez désactivées initialement.

Positionnement des commandes

La plupart des options de commande contiennent une propriété position (du type ControlPosition) qui indique où placer la commande sur la carte. Le positionnement de ces commandes n'est pas absolu. L'API les positionnera donc de manière intelligente autour des éléments existants sur la carte, ou des autres commandes, dans les limites données (comme la taille de la carte).

Il existe deux types de positions de contrôle : les positions anciennes et les positions logiques. Il est recommandé d'utiliser des valeurs logiques pour pouvoir prendre en charge automatiquement les contextes de mise en page de gauche à droite et de droite à gauche. Consultez le guide de référence.

Les tableaux suivants présentent les positions de contrôle compatibles dans les contextes LTR et RTL.

Cliquez sur les libellés pour basculer entre les modes LTR et RTL.

Notez que ces positions peuvent coïncider avec celles des éléments de l'interface utilisateur dont vous ne pouvez pas modifier l'emplacement (droits d'auteur et logo Google, par exemple). Dans ce cas, les commandes sont réparties selon la logique notée pour chaque position et apparaissent aussi près que possible de leur position indiquée. Bien que l'API tente de les organiser de manière intelligente, il n'est pas garanti que les commandes ne se chevauchent pas en cas de disposition compliquée.

L'exemple suivant montre une carte de base où toutes les commandes sont activées à des positions différentes.

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

Commandes personnalisées

Outre la modification du style et de la position des commandes d'API existantes, vous pouvez créer vos propres commandes afin de gérer les interactions avec l'utilisateur. Les commandes sont des widgets fixes qui flottent en haut d'une carte à une position absolue, par opposition aux superpositions, qui se déplacent avec la carte en dessous d'elles. Fondamentalement, une commande est simplement un élément <div> ayant une position absolue sur la carte, qui affiche une partie de l'interface à l'utilisateur et gère les interactions avec celui-ci ou avec la carte, généralement via un gestionnaire d'événements.

Pour créer votre commande personnalisée, quelques règles doivent être respectées. Les recommandations ci-dessous peuvent servir de bonnes pratiques :

• Définissez une feuille de style appropriée pour le ou les éléments de commande à afficher.
• Gérez les interactions avec l'utilisateur ou avec la carte via des gestionnaires d'événements pour les modifications de propriété de carte ou les événements utilisateur (par exemple, les événements 'click').
• Créez un élément <div> qui contiendra la commande, puis ajoutez cet élément à la propriété controls de Map.

Chacun de ces points est expliqué ci-après.

Dessiner des commandes personnalisées

Vous pouvez concevoir la commande comme vous le voulez. Nous recommandons généralement de placer toute la présentation de votre commande dans un seul élément <div> afin de pouvoir manipuler votre commande comme une seule unité. Nous utilisons ce modèle de conception dans les échantillons ci-dessous.

La conception de commandes esthétiques nécessite de connaître les structures CSS et DOM. Les exemples de code suivants montrent comment ajouter une commande personnalisée à l'aide des méthodes HTML déclaratives et programmatiques.

CSS déclaratif

Les styles CSS suivants offrent une apparence cohérente avec les commandes par défaut. Utilisez ces styles avec les deux exemples ci-dessous :

.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 déclaratif

Ces extraits de code montrent comment créer un contrôle personnalisé de manière déclarative. Dans le code HTML, un DIV avec l'ID container est utilisé pour positionner le contrôle. Il est imbriqué dans l'élément gmp-map et le bouton est ajouté au DIV. L'attribut slot est défini sur control-inline-start-block-start pour positionner le contrôle en haut à gauche de la carte.

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

Dans le JavaScript, getElementById() est utilisé pour trouver la DIV et le bouton, un écouteur d'événements est ajouté au bouton, et le bouton est ajouté à la 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 programmatique

Cet extrait de code montre comment créer un bouton de commande par programmation. Les styles CSS sont définis ci-dessus.

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

Gérer les événements liés aux commandes personnalisées

Pour qu'une commande soit utile, elle doit vraiment servir à quelque chose. À vous de choisir quelle sera son utilité. La commande peut répondre à une saisie de l'utilisateur ou à des modifications de l'état de la Map.

Pour répondre à l'entrée utilisateur, utilisez addEventListener(), qui gère les événements DOM compatibles. L'extrait de code suivant ajoute un écouteur pour l'événement 'click' du navigateur. Notez que cet événement est reçu depuis le DOM, pas la carte.

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

Rendre les commandes personnalisées accessibles

Pour vous assurer que les commandes reçoivent les événements de clavier et s'affichent correctement sur les lecteurs d'écran :

• Utilisez toujours des éléments HTML natifs pour les boutons, les éléments de formulaire et les libellés. N'utilisez qu'un élément DIV comme conteneur de commandes natives ; ne réutilisez jamais un élément DIV en tant qu'élément d'interface utilisateur interactif.
• Si nécessaire, utilisez l'élément label, ou les attributs title ou aria-label pour fournir des informations sur un élément de l'interface utilisateur.

Positionner des commandes personnalisées

Utilisez l'attribut slot pour positionner les commandes personnalisées en spécifiant la position de commande requise. Pour en savoir plus sur ces positions, consultez Positionnement des commandes ci-dessus.

Chaque ControlPosition stocke un MVCArray des commandes affichées sur cette position. Ainsi, lorsque des commandes sont ajoutées ou supprimées de la position, l'API les met à jour en conséquence.

Le code suivant crée une commande personnalisée (son constructeur n'est pas affiché) et l'ajoute à la carte à la position BLOCK_START_INLINE_END (en haut à droite dans un contexte 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);

Pour définir la position d'un contrôle personnalisé de manière déclarative, définissez l'attribut slot dans le code HTML :

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

Exemple de commande personnalisée

La commande suivante est simple (bien que pas particulièrement utile) et combine les modèles présentés ci-avant. Cette commande répond aux événements DOM 'click' en centrant la carte à un certain lieu par défaut :

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

Ajouter l'état aux commandes

Les commandes peuvent également stocker un état. L'exemple suivant est semblable au précédent, mais la commande contient un bouton "Set Home" qui définit l'affichage d'un nouveau lieu d'accueil. Pour ce faire, nous définissons une propriété home_ dans la commande afin de stocker cet état et fournir des accesseurs et des mutateurs (getters et setters) pour cet état.

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