Add State to Controls

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.

TypeScript

let innerMap;
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

let center: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

async function initMap() {
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const setCenterButton = document.getElementById('btnCenterMap') as HTMLInputElement;
    const resetCenterButton = document.getElementById('btnSetCenter') as HTMLInputElement;

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    setCenterButton.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.
    resetCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

initMap();
index.ts

JavaScript

let innerMap;
const mapElement = document.querySelector('gmp-map');
let center = { lat: 41.85, lng: -87.65 };
async function initMap() {
    (await google.maps.importLibrary('maps'));
    innerMap = mapElement.innerMap;
    // Get the button UI elements.
    const setCenterButton = document.getElementById('btnCenterMap');
    const resetCenterButton = document.getElementById('btnSetCenter');
    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    setCenterButton.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.
    resetCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();
        if (newCenter) {
            center = newCenter;
        }
    });
}
initMap();
index.js

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

style.css

HTML

<html>
    <head>
        <title>Adding State to Controls</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map center="41.85, -87.65" zoom="12">
            <div
                class="custom-control"
                slot="control-block-start-inline-center">
                <input
                    type="button"
                    class="button"
                    id="btnCenterMap"
                    value="Center Map"
                    title="Click to recenter the map." />
                <input
                    type="button"
                    class="button"
                    id="btnSetCenter"
                    value="Set Center"
                    title="Click to change the center of the map." />
            </div>
        </gmp-map>
    </body>
</html>
index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. 

  git clone https://github.com/googlemaps-samples/js-api-samples.git
  cd samples/control-custom-state
  npm i
  npm start