Skip to content

Update custom controls sample and migrate to new repo #1121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sascala wants to merge 2 commits into
base: main
Choose a base branch
from
+737 −0
Open

Update custom controls sample and migrate to new repo #1121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a84fe24
Update custom controls sample and migrate to new repo
sascala Feb 20, 2026
3a71c93
Add closing region tag
sascala Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions dist/samples/control-custom/app/.eslintsrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": [
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"rules": {
"@typescript-eslint/ban-ts-comment": 0,
"@typescript-eslint/no-this-alias": 1,
"@typescript-eslint/no-empty-function": 1,
"@typescript-eslint/explicit-module-boundary-types": 1,
"@typescript-eslint/no-unused-vars": 1
}
}
41 changes: 41 additions & 0 deletions dist/samples/control-custom/app/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Google Maps JavaScript Sample

## control-custom

Create a map with custom controls.

## Setup

### Before starting run:

`npm i`

### Run an example on a local web server

`cd samples/control-custom`
`npm start`

### Build an individual example

`cd samples/control-custom`
`npm run build`

From 'samples':

`npm run build --workspace=control-custom/`

### Build all of the examples.

From 'samples':

`npm run build-all`

### Run lint to check for problems

`cd samples/control-custom`
`npx eslint index.ts`

## Feedback

For feedback related to this sample, please open a new issue on
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
31 changes: 31 additions & 0 deletions dist/samples/control-custom/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!-- [START maps_control_custom] -->
<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 id="map"></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>
<!-- [END maps_control_custom] -->
67 changes: 67 additions & 0 deletions dist/samples/control-custom/app/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/

// [START maps_control_custom]
let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
* Creates a control that recenters the map on Chicago.
*/
function createCenterControl(map) {
const controlButton = 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);
});

return controlButton;
}

function initMap() {
map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
zoom: 12,
center: chicago,
});

// Create the DIV to hold the control.
const centerControlDiv = document.createElement('div');
// Create the control.
const centerControl = createCenterControl(map);
// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
// [END maps_control_custom]
export {};
14 changes: 14 additions & 0 deletions dist/samples/control-custom/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "@js-api-samples/control-custom",
"version": "1.0.0",
"scripts": {
"build": "tsc && bash ../jsfiddle.sh control-custom && bash ../app.sh control-custom && bash ../docs.sh control-custom && npm run build:vite --workspace=. && bash ../dist.sh control-custom",
"test": "tsc && npm run build:vite --workspace=.",
"start": "tsc && vite build --base './' && vite",
"build:vite": "vite build --base './'",
"preview": "vite preview"
},
"dependencies": {

}
}
25 changes: 25 additions & 0 deletions dist/samples/control-custom/app/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/* [START maps_control_custom] */
/*
* 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;
}

/* [END maps_control_custom] */
17 changes: 17 additions & 0 deletions dist/samples/control-custom/app/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"compilerOptions": {
"module": "esnext",
"target": "esnext",
"strict": true,
"noImplicitAny": false,
"lib": [
"es2015",
"esnext",
"es6",
"dom",
"dom.iterable"
],
"moduleResolution": "Node",
"jsx": "preserve"
}
}
1 change: 1 addition & 0 deletions dist/samples/control-custom/dist/assets/index-DWepjxzn.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
#map{height:100%}html,body{height:100%;margin:0;padding:0}
1 change: 1 addition & 0 deletions dist/samples/control-custom/dist/assets/index-sPwHwC05.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 31 additions & 0 deletions dist/samples/control-custom/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!-- [START maps_control_custom] -->
<html>
<head>
<title>Custom Controls</title>

<script type="module" crossorigin src="./assets/index-sPwHwC05.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DWepjxzn.css">
</head>
<body>
<div id="map"></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>
<!-- [END maps_control_custom] -->
31 changes: 31 additions & 0 deletions dist/samples/control-custom/docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!-- [START maps_control_custom] -->
<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 id="map"></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>
<!-- [END maps_control_custom] -->
51 changes: 51 additions & 0 deletions dist/samples/control-custom/docs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_control_custom]
let map;
const chicago = { lat: 41.85, lng: -87.65 };
/**
* Creates a control that recenters the map on Chicago.
*/
function createCenterControl(map) {
const controlButton = 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);
});
return controlButton;
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: chicago,
});
// Create the DIV to hold the control.
const centerControlDiv = document.createElement('div');
// Create the control.
const centerControl = createCenterControl(map);
// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
window.initMap = initMap;
export {};
// [END maps_control_custom
Loading
Loading