This example demonstrates adding controls that store state. It shows a map with
two buttons, "Set Center" and "Center Map". The "Set Center" button can be used
to store the center of the map. Pressing the "Center Map" button will pan the
map to the previously stored center.
Read the [documentation](https://developers.google.com/maps/documentation/javascript/controls.md.txt#ControlState).
### TypeScript
```typescript
let innerMap: google.maps.Map;
const mapElement = document.querySelector('gmp-map')!;
let center: google.maps.LatLngLiteral | google.maps.LatLng = {
lat: 41.85,
lng: -87.65,
};
async function init() {
await google.maps.importLibrary('maps');
innerMap = mapElement.innerMap;
// Get the button UI elements.
const centerMapButton = document.getElementById(
'btnCenterMap'
) as HTMLInputElement;
const setCenterButton = document.getElementById(
'btnSetCenter'
) as HTMLInputElement;
// Set up the click event listener for the 'Center Map' button. Set the map
// to the currently stored center.
centerMapButton.addEventListener('click', () => {
const currentCenter = center;
innerMap.setCenter(currentCenter);
});
// Set up the click event listener for 'Set Center': Set the center of
// the control to the current center of the map.
setCenterButton.addEventListener('click', () => {
const newCenter = innerMap.getCenter();
if (newCenter) {
center = newCenter;
}
});
}
void init();
```
### JavaScript
```javascript
let innerMap;
const mapElement = document.querySelector('gmp-map');
let center = {
lat: 41.85,
lng: -87.65,
};
async function init() {
await google.maps.importLibrary('maps');
innerMap = mapElement.innerMap;
// Get the button UI elements.
const centerMapButton = document.getElementById('btnCenterMap');
const setCenterButton = document.getElementById('btnSetCenter');
// Set up the click event listener for the 'Center Map' button. Set the map
// to the currently stored center.
centerMapButton.addEventListener('click', () => {
const currentCenter = center;
innerMap.setCenter(currentCenter);
});
// Set up the click event listener for 'Set Center': Set the center of
// the control to the current center of the map.
setCenterButton.addEventListener('click', () => {
const newCenter = innerMap.getCenter();
if (newCenter) {
center = newCenter;
}
});
}
void init();
```
### CSS
```css
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#btnCenterMap,
#btnSetCenter {
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;
margin-top: 5px;
text-align: center;
color: rgb(25, 25, 25);
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
line-height: 25px;
}
#btnSetCenter {
margin-left: 12px;
}
```
### HTML
```html
Adding State to Controls
```
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/control-custom-state/jsfiddle)
### Clone Sample
Git and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
to install Node.js and NPM. You will also need a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key.md.txt).
The following commands clone the repository, install dependencies, and copy the environment file.
```javascript
git clone https://github.com/googlemaps-samples/js-api-samples.git
cd js-api-samples
npm i
cp .env.template .env
```
Once you copy the environment file, make sure to open the `.env` file and replace `` with your actual API key before starting the sample.
```javascript
cd samples/control-custom-state
npm start
```