Add State to Controls

  • This example demonstrates how to add controls to a Google Map that can store and utilize state.

  • It features two buttons: "Set Center" which stores the current map center, and "Center Map" which recenters the map to the stored location.

  • The sample code showcases the implementation using TypeScript and JavaScript, along with HTML and CSS for styling.

  • Users can interact with a live demo through provided links to JSFiddle and Google Cloud Shell.

  • Developers can clone and run the sample locally using Git and Node.js following the instructions provided.

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