Adding State to Controls

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

/*   * Always set the map height explicitly to define the size of the div element  * that contains the map.   */ #map {  height: 100%; } /*   * Optional: Makes the sample page fill the window.   */ html, body {  height: 100%;  margin: 0;  padding: 0; } #goCenterUI, #setCenterUI {  background-color: #fff;  border: 2px solid #fff;  border-radius: 3px;  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  cursor: pointer;  float: left;  margin-bottom: 22px;  text-align: center; } #goCenterText, #setCenterText {  color: rgb(25, 25, 25);  font-family: Roboto, Arial, sans-serif;  font-size: 15px;  line-height: 25px;  padding-left: 5px;  padding-right: 5px; } #setCenterUI {  margin-left: 12px; } 
style.css

<html> <head> <title>Adding State to Controls</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
index.html