Page Summary
-
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 ();
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 ();
CSS
/* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; } # btnCenterMap , # btnSetCenter { background-color : #fff ; border : 2 px solid #fff ; border-radius : 3 px ; box-shadow : 0 2 px 6 px rgba ( 0 , 0 , 0 , 0.3 ); cursor : pointer ; float : left ; margin-bottom : 22 px ; margin-top : 5 px ; text-align : center ; color : rgb ( 25 , 25 , 25 ); font-family : Roboto , Arial , sans-serif ; font-size : 15 px ; line-height : 25 px ; } # btnSetCenter { margin-left : 12 px ; }
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>
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.gitcd samples / control - custom - statenpm inpm start
