Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Custom Controls

  • This example demonstrates how to create a custom control on a Google Map that recenters the map to Chicago.

  • The control is a button labeled "Center Map" and is positioned at the top center of the map.

  • When clicked, the button triggers a function to set the map's center to the coordinates of Chicago.

  • This example uses TypeScript and JavaScript to create the custom control and integrate it with the Google Maps API.

This example creates a map with a "Center Map" button, which will pan the map tobe centered on Chicago.

Read thedocumentation.

TypeScript

letmap:google.maps.Map;constchicago={lat:41.85,lng:-87.65};/** * Creates a control that recenters the map on Chicago. */functioncreateCenterControl(map){constcontrolButton=document.createElement('button');// Set CSS for the control.controlButton.style.backgroundColor='#fff';controlButton.style.border='2px solid #fff';controlButton.style.borderRadius='3px';controlButton.style.boxShadow='0 2px 6px rgba(0,0,0,.3)';controlButton.style.color='rgb(25,25,25)';controlButton.style.cursor='pointer';controlButton.style.fontFamily='Roboto,Arial,sans-serif';controlButton.style.fontSize='16px';controlButton.style.lineHeight='38px';controlButton.style.margin='8px 0 22px';controlButton.style.padding='0 5px';controlButton.style.textAlign='center';controlButton.textContent='Center Map';controlButton.title='Click to recenter the map';controlButton.type='button';// Setup the click event listeners: simply set the map to Chicago.controlButton.addEventListener('click',()=>{map.setCenter(chicago);});returncontrolButton;}functioninitMap(){map=newgoogle.maps.Map(document.getElementById('map')asHTMLElement,{zoom:12,center:chicago,});// Create the DIV to hold the control.constcenterControlDiv=document.createElement('div');// Create the control.constcenterControl=createCenterControl(map);// Append the control to the DIV.centerControlDiv.appendChild(centerControl);map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

letmap;constchicago={lat:41.85,lng:-87.65};/** * Creates a control that recenters the map on Chicago. */functioncreateCenterControl(map){constcontrolButton=document.createElement("button");// Set CSS for the control.controlButton.style.backgroundColor="#fff";controlButton.style.border="2px solid #fff";controlButton.style.borderRadius="3px";controlButton.style.boxShadow="0 2px 6px rgba(0,0,0,.3)";controlButton.style.color="rgb(25,25,25)";controlButton.style.cursor="pointer";controlButton.style.fontFamily="Roboto,Arial,sans-serif";controlButton.style.fontSize="16px";controlButton.style.lineHeight="38px";controlButton.style.margin="8px 0 22px";controlButton.style.padding="0 5px";controlButton.style.textAlign="center";controlButton.textContent="Center Map";controlButton.title="Click to recenter the map";controlButton.type="button";// Setup the click event listeners: simply set the map to Chicago.controlButton.addEventListener("click",()=>{map.setCenter(chicago);});returncontrolButton;}functioninitMap(){map=newgoogle.maps.Map(document.getElementById("map"),{zoom:12,center:chicago,});// Create the DIV to hold the control.constcenterControlDiv=document.createElement("div");// Create the control.constcenterControl=createCenterControl(map);// Append the control to the DIV.centerControlDiv.appendChild(centerControl);map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);}window.initMap=initMap;
Note: The JavaScript is compiled from the TypeScript snippet.

CSS

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

HTML

<html>  <head>    <title>Custom Controls</title>    <link rel="stylesheet" type="text/css" href="./style.css" />    <script type="module" src="./index.js"></script>  </head>  <body>    <div></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>

Try Sample

Clone Sample

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

gitclone-bsample-control-customhttps://github.com/googlemaps/js-samples.gitcdjs-samplesnpminpmstart

Other samples can be tried by switching to any branch beginning withsample-SAMPLE_NAME.

gitcheckoutsample-SAMPLE_NAMEnpminpmstart

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-12-11 UTC.