From dc617c5951eeeaa47ba6645ad0c7f6e8f113ae47 Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 13 Jan 2026 07:38:08 -0800 Subject: [PATCH 01/13] feat: Migrates a set of control samples. --- samples/control-disableUI/README.md | 41 ++++++ samples/control-disableUI/index.html | 22 ++++ samples/control-disableUI/index.ts | 29 +++++ samples/control-disableUI/package.json | 14 ++ samples/control-disableUI/style.css | 25 ++++ samples/control-disableUI/tsconfig.json | 17 +++ samples/control-options/README.md | 41 ++++++ samples/control-options/index.html | 22 ++++ samples/control-options/index.ts | 36 ++++++ samples/control-options/package.json | 14 ++ samples/control-options/style.css | 25 ++++ samples/control-options/tsconfig.json | 17 +++ samples/control-positioning-labels/README.md | 41 ++++++ samples/control-positioning-labels/index.html | 23 ++++ samples/control-positioning-labels/index.ts | 122 ++++++++++++++++++ .../control-positioning-labels/package.json | 14 ++ samples/control-positioning-labels/style.css | 25 ++++ .../control-positioning-labels/tsconfig.json | 17 +++ samples/control-simple/README.md | 41 ++++++ samples/control-simple/index.html | 22 ++++ samples/control-simple/index.ts | 28 ++++ samples/control-simple/package.json | 14 ++ samples/control-simple/style.css | 25 ++++ samples/control-simple/tsconfig.json | 17 +++ 24 files changed, 692 insertions(+) create mode 100644 samples/control-disableUI/README.md create mode 100644 samples/control-disableUI/index.html create mode 100644 samples/control-disableUI/index.ts create mode 100644 samples/control-disableUI/package.json create mode 100644 samples/control-disableUI/style.css create mode 100644 samples/control-disableUI/tsconfig.json create mode 100644 samples/control-options/README.md create mode 100644 samples/control-options/index.html create mode 100755 samples/control-options/index.ts create mode 100644 samples/control-options/package.json create mode 100644 samples/control-options/style.css create mode 100644 samples/control-options/tsconfig.json create mode 100644 samples/control-positioning-labels/README.md create mode 100644 samples/control-positioning-labels/index.html create mode 100644 samples/control-positioning-labels/index.ts create mode 100644 samples/control-positioning-labels/package.json create mode 100644 samples/control-positioning-labels/style.css create mode 100644 samples/control-positioning-labels/tsconfig.json create mode 100644 samples/control-simple/README.md create mode 100644 samples/control-simple/index.html create mode 100644 samples/control-simple/index.ts create mode 100644 samples/control-simple/package.json create mode 100644 samples/control-simple/style.css create mode 100644 samples/control-simple/tsconfig.json diff --git a/samples/control-disableUI/README.md b/samples/control-disableUI/README.md new file mode 100644 index 00000000..e7d6b7d3 --- /dev/null +++ b/samples/control-disableUI/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## control-disableUI + +This sample shows how to disable UI Controls on the Map. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/control-disableUI` +`npm start` + +### Build an individual example + +`cd samples/control-disableUI` +`npm run build` + +From 'samples': + +`npm run build --workspace=control-disableUI/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/control-disableUI` +`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). diff --git a/samples/control-disableUI/index.html b/samples/control-disableUI/index.html new file mode 100644 index 00000000..7c11430c --- /dev/null +++ b/samples/control-disableUI/index.html @@ -0,0 +1,22 @@ + + + + + + Disabling the Default UI + + + + + + + + + + + diff --git a/samples/control-disableUI/index.ts b/samples/control-disableUI/index.ts new file mode 100644 index 00000000..f2851caa --- /dev/null +++ b/samples/control-disableUI/index.ts @@ -0,0 +1,29 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_control_disableUI] +async function initMap() { + // Request the needed libraries. + const [{ Map }] = await Promise.all([ + google.maps.importLibrary('maps') as Promise, + ]); + + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + const innerMap = mapElement.innerMap; + + // [START maps_control_disableUI_options] + innerMap.setOptions({ + // Disable the default UI. + disableDefaultUI: true, + }); + // [END maps_control_disableUI_options] +} + +initMap(); +// [END maps_control_disableUI] diff --git a/samples/control-disableUI/package.json b/samples/control-disableUI/package.json new file mode 100644 index 00000000..c21f254b --- /dev/null +++ b/samples/control-disableUI/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/control-disableUI", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh control-disableUI && bash ../app.sh control-disableUI && bash ../docs.sh control-disableUI && npm run build:vite --workspace=. && bash ../dist.sh control-disableUI", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/control-disableUI/style.css b/samples/control-disableUI/style.css new file mode 100644 index 00000000..b1261ce3 --- /dev/null +++ b/samples/control-disableUI/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_control_disableUI] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_control_disableUI] */ \ No newline at end of file diff --git a/samples/control-disableUI/tsconfig.json b/samples/control-disableUI/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/control-disableUI/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} diff --git a/samples/control-options/README.md b/samples/control-options/README.md new file mode 100644 index 00000000..3293f2e6 --- /dev/null +++ b/samples/control-options/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## control-options + +This sample shows setting map control options. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/control-options` +`npm start` + +### Build an individual example + +`cd samples/control-options` +`npm run build` + +From 'samples': + +`npm run build --workspace=control-options/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/control-options` +`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). diff --git a/samples/control-options/index.html b/samples/control-options/index.html new file mode 100644 index 00000000..9ac1fefd --- /dev/null +++ b/samples/control-options/index.html @@ -0,0 +1,22 @@ + + + + + + Control Options + + + + + + + + + + + diff --git a/samples/control-options/index.ts b/samples/control-options/index.ts new file mode 100755 index 00000000..1ee6b81c --- /dev/null +++ b/samples/control-options/index.ts @@ -0,0 +1,36 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_control_options] +// You can set control options to change the default position or style of many +// of the map controls. + +async function initMap() { + // Request the needed libraries. + const [{ Map }] = await Promise.all([ + google.maps.importLibrary('maps') as Promise, + ]); + + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + const innerMap = mapElement.innerMap; + + // [START maps_control_options_change_default] + innerMap.setOptions({ + mapTypeControl: true, + mapTypeControlOptions: { + style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, + mapTypeIds: ['roadmap', 'terrain'], + position: google.maps.ControlPosition.TOP_CENTER, + }, + }); + // [END maps_control_options_change_default] +} + +initMap(); +// [END maps_control_options] diff --git a/samples/control-options/package.json b/samples/control-options/package.json new file mode 100644 index 00000000..ec274193 --- /dev/null +++ b/samples/control-options/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/control-options", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh control-options && bash ../app.sh control-options && bash ../docs.sh control-options && npm run build:vite --workspace=. && bash ../dist.sh control-options", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/control-options/style.css b/samples/control-options/style.css new file mode 100644 index 00000000..f9a1e19e --- /dev/null +++ b/samples/control-options/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_control_options] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_control_options] */ \ No newline at end of file diff --git a/samples/control-options/tsconfig.json b/samples/control-options/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/control-options/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} diff --git a/samples/control-positioning-labels/README.md b/samples/control-positioning-labels/README.md new file mode 100644 index 00000000..462bb29d --- /dev/null +++ b/samples/control-positioning-labels/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## control-positioning-labels + +This sample shows control position labels on a map. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/control-positioning-labels` +`npm start` + +### Build an individual example + +`cd samples/control-positioning-labels` +`npm run build` + +From 'samples': + +`npm run build --workspace=control-positioning-labels/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/control-positioning-labels` +`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). diff --git a/samples/control-positioning-labels/index.html b/samples/control-positioning-labels/index.html new file mode 100644 index 00000000..2697baad --- /dev/null +++ b/samples/control-positioning-labels/index.html @@ -0,0 +1,23 @@ + + + + + + Control Positioning Labels + + + + + + + + + + + + diff --git a/samples/control-positioning-labels/index.ts b/samples/control-positioning-labels/index.ts new file mode 100644 index 00000000..e0e90ebf --- /dev/null +++ b/samples/control-positioning-labels/index.ts @@ -0,0 +1,122 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_control_positioning_labels] +/** + * Creates a series of custom controls to demonstrate positioning + * of controls within a map. + */ + +/** + * MakeControl adds a control to the map. + * This constructor takes the controlDIV name and label text as arguments. + */ +async function MakeControl(controlDiv: HTMLElement, label: string) { + // Set up the control border. + const controlUI = document.createElement('div'); + + controlUI.style.backgroundColor = '#fff'; + controlUI.style.padding = '3px'; + controlUI.style.cursor = 'pointer'; + controlUI.style.textAlign = 'center'; + controlUI.title = 'Click to toggle RTL/LTR'; + controlUI.className = 'controlUI'; + controlDiv.appendChild(controlUI); + + // Set up the inner control. + const controlText = document.createElement('div'); + controlText.style.fontSize = '12px'; + controlText.innerHTML = label; + controlText.className = 'controlText'; + controlUI.appendChild(controlText); +} + +async function initMap() { + // Request the needed libraries. + const [{ Map }] = await Promise.all([ + google.maps.importLibrary('maps') as Promise, + ]); + + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + const innerMap = mapElement.innerMap; + + const controlText: [string, google.maps.ControlPosition][] = [ + [ + 'BLOCK_START_INLINE_START', + google.maps.ControlPosition.BLOCK_START_INLINE_START, + ], + [ + 'INLINE_START_BLOCK_START', + google.maps.ControlPosition.INLINE_START_BLOCK_START, + ], + [ + 'BLOCK_START_INLINE_CENTER', + google.maps.ControlPosition.BLOCK_START_INLINE_CENTER, + ], + [ + 'BLOCK_START_INLINE_END', + google.maps.ControlPosition.BLOCK_START_INLINE_END, + ], + [ + 'INLINE_END_BLOCK_START', + google.maps.ControlPosition.INLINE_END_BLOCK_START, + ], + [ + 'INLINE_START_BLOCK_CENTER', + google.maps.ControlPosition.INLINE_START_BLOCK_CENTER, + ], + [ + 'INLINE_END_BLOCK_CENTER', + google.maps.ControlPosition.INLINE_END_BLOCK_CENTER, + ], + [ + 'BLOCK_END_INLINE_START', + google.maps.ControlPosition.BLOCK_END_INLINE_START, + ], + [ + 'INLINE_START_BLOCK_END', + google.maps.ControlPosition.INLINE_START_BLOCK_END, + ], + [ + 'BLOCK_END_INLINE_CENTER', + google.maps.ControlPosition.BLOCK_END_INLINE_CENTER, + ], + [ + 'BLOCK_END_INLINE_END', + google.maps.ControlPosition.BLOCK_END_INLINE_END, + ], + [ + 'INLINE_END_BLOCK_END', + google.maps.ControlPosition.INLINE_END_BLOCK_END, + ], + ]; + + for (let i = 0; i < controlText.length; i++) { + const divLabel = controlText[i][0] as string; + const divName = document.createElement('div'); + + MakeControl(divName, divLabel); + innerMap.controls[controlText[i][1]].push(divName); + divName.addEventListener('click', toggleRTL); + } +} + +/** + * Toggles the 'dir' attribute on the html element between 'ltr' and 'rtl'. + */ +async function toggleRTL() { + const html = document.documentElement; + if (html.dir === 'rtl') { + html.dir = 'ltr'; + } else { + html.dir = 'rtl'; + } +} + +initMap(); +// [END maps_control_positioning_labels] diff --git a/samples/control-positioning-labels/package.json b/samples/control-positioning-labels/package.json new file mode 100644 index 00000000..a8c9915e --- /dev/null +++ b/samples/control-positioning-labels/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/control-positioning-labels", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh control-positioning-labels && bash ../app.sh control-positioning-labels && bash ../docs.sh control-positioning-labels && npm run build:vite --workspace=. && bash ../dist.sh control-positioning-labels", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/control-positioning-labels/style.css b/samples/control-positioning-labels/style.css new file mode 100644 index 00000000..6f59ec33 --- /dev/null +++ b/samples/control-positioning-labels/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_control_positioning_labels] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_control_positioning_labels] */ diff --git a/samples/control-positioning-labels/tsconfig.json b/samples/control-positioning-labels/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/control-positioning-labels/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} diff --git a/samples/control-simple/README.md b/samples/control-simple/README.md new file mode 100644 index 00000000..f0a26e88 --- /dev/null +++ b/samples/control-simple/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## control-simple + +This sample demonstrates hiding the camera control. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/control-simple` +`npm start` + +### Build an individual example + +`cd samples/control-simple` +`npm run build` + +From 'samples': + +`npm run build --workspace=control-simple/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/control-simple` +`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). diff --git a/samples/control-simple/index.html b/samples/control-simple/index.html new file mode 100644 index 00000000..4df8112e --- /dev/null +++ b/samples/control-simple/index.html @@ -0,0 +1,22 @@ + + + + + + Adding Controls to the Map + + + + + + + + + + + diff --git a/samples/control-simple/index.ts b/samples/control-simple/index.ts new file mode 100644 index 00000000..67987473 --- /dev/null +++ b/samples/control-simple/index.ts @@ -0,0 +1,28 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_control_simple] +async function initMap() { + // Request the needed libraries. + const [{ Map }] = await Promise.all([ + google.maps.importLibrary('maps') as Promise, + ]); + + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + const innerMap = mapElement.innerMap; + + // [START maps_control_simple_options] + innerMap.setOptions({ + cameraControl: false, + scaleControl: true, + }); + // [END maps_control_simple_options] +} +initMap(); +// [END maps_control_simple] diff --git a/samples/control-simple/package.json b/samples/control-simple/package.json new file mode 100644 index 00000000..df74e5bf --- /dev/null +++ b/samples/control-simple/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/control-simple", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh control-simple && bash ../app.sh control-simple && bash ../docs.sh control-simple && npm run build:vite --workspace=. && bash ../dist.sh control-simple", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/control-simple/style.css b/samples/control-simple/style.css new file mode 100644 index 00000000..d5b7abd3 --- /dev/null +++ b/samples/control-simple/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_control_simple] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_control_simple] */ \ No newline at end of file diff --git a/samples/control-simple/tsconfig.json b/samples/control-simple/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/control-simple/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} From 1c6e853b0d9da21efd85e13a5ef273227935f839 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:30:49 -0800 Subject: [PATCH 02/13] Fix spacing in gmp-map center attribute --- samples/control-disableUI/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/control-disableUI/index.html b/samples/control-disableUI/index.html index 7c11430c..70397f17 100644 --- a/samples/control-disableUI/index.html +++ b/samples/control-disableUI/index.html @@ -16,7 +16,7 @@ ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); - + From 1881005df9321069bb91d7b28623bf09e3999bc1 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:32:52 -0800 Subject: [PATCH 03/13] Simplify library import for map initialization --- samples/control-disableUI/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/samples/control-disableUI/index.ts b/samples/control-disableUI/index.ts index f2851caa..e443c040 100644 --- a/samples/control-disableUI/index.ts +++ b/samples/control-disableUI/index.ts @@ -7,9 +7,7 @@ // [START maps_control_disableUI] async function initMap() { // Request the needed libraries. - const [{ Map }] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - ]); + await google.maps.importLibrary('maps'); const mapElement = document.querySelector( 'gmp-map' From 4b4cf246e226f04a49f555b477c7a46cb057b566 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:35:55 -0800 Subject: [PATCH 04/13] Simplify map library import in initMap function Refactor map library import to simplify code. --- samples/control-options/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/samples/control-options/index.ts b/samples/control-options/index.ts index 1ee6b81c..cf0ffab6 100755 --- a/samples/control-options/index.ts +++ b/samples/control-options/index.ts @@ -10,9 +10,7 @@ async function initMap() { // Request the needed libraries. - const [{ Map }] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - ]); + await google.maps.importLibrary('maps'); const mapElement = document.querySelector( 'gmp-map' From 215982ad49a5cc46d49bbbd39eb5a1a44152385d Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:38:10 -0800 Subject: [PATCH 05/13] Refactor mapTypeIds to use enum values --- samples/control-options/index.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/samples/control-options/index.ts b/samples/control-options/index.ts index cf0ffab6..1c5c1658 100755 --- a/samples/control-options/index.ts +++ b/samples/control-options/index.ts @@ -23,7 +23,10 @@ async function initMap() { mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, - mapTypeIds: ['roadmap', 'terrain'], + mapTypeIds: [ + google.maps.MapTypeId.ROADMAP, + google.maps.MapTypeId.TERRAIN, + ], position: google.maps.ControlPosition.TOP_CENTER, }, }); From 583bc40e0b5aa1e92b00971f8a37b0d6dd13e965 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:39:36 -0800 Subject: [PATCH 06/13] Clean up package.json by removing dependencies Removed empty dependencies section from package.json --- samples/control-disableUI/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/samples/control-disableUI/package.json b/samples/control-disableUI/package.json index c21f254b..2598168b 100644 --- a/samples/control-disableUI/package.json +++ b/samples/control-disableUI/package.json @@ -7,8 +7,5 @@ "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", "preview": "vite preview" - }, - "dependencies": { - } } From 98ae5864323c11a3ec68cfd3ae6d830789818543 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:40:24 -0800 Subject: [PATCH 07/13] Simplify map library import in initMap function --- samples/control-positioning-labels/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/samples/control-positioning-labels/index.ts b/samples/control-positioning-labels/index.ts index e0e90ebf..3e3229ca 100644 --- a/samples/control-positioning-labels/index.ts +++ b/samples/control-positioning-labels/index.ts @@ -35,9 +35,7 @@ async function MakeControl(controlDiv: HTMLElement, label: string) { async function initMap() { // Request the needed libraries. - const [{ Map }] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - ]); + await google.maps.importLibrary('maps'); const mapElement = document.querySelector( 'gmp-map' From ec471ead0aac58544c5b3c0e45f2d348b3ec6983 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:43:52 -0800 Subject: [PATCH 08/13] Refactor control positioning labels for cleaner code --- samples/control-positioning-labels/index.ts | 72 ++++++--------------- 1 file changed, 18 insertions(+), 54 deletions(-) diff --git a/samples/control-positioning-labels/index.ts b/samples/control-positioning-labels/index.ts index 3e3229ca..a0995cf5 100644 --- a/samples/control-positioning-labels/index.ts +++ b/samples/control-positioning-labels/index.ts @@ -43,65 +43,29 @@ async function initMap() { const innerMap = mapElement.innerMap; - const controlText: [string, google.maps.ControlPosition][] = [ - [ - 'BLOCK_START_INLINE_START', - google.maps.ControlPosition.BLOCK_START_INLINE_START, - ], - [ - 'INLINE_START_BLOCK_START', - google.maps.ControlPosition.INLINE_START_BLOCK_START, - ], - [ - 'BLOCK_START_INLINE_CENTER', - google.maps.ControlPosition.BLOCK_START_INLINE_CENTER, - ], - [ - 'BLOCK_START_INLINE_END', - google.maps.ControlPosition.BLOCK_START_INLINE_END, - ], - [ - 'INLINE_END_BLOCK_START', - google.maps.ControlPosition.INLINE_END_BLOCK_START, - ], - [ - 'INLINE_START_BLOCK_CENTER', - google.maps.ControlPosition.INLINE_START_BLOCK_CENTER, - ], - [ - 'INLINE_END_BLOCK_CENTER', - google.maps.ControlPosition.INLINE_END_BLOCK_CENTER, - ], - [ - 'BLOCK_END_INLINE_START', - google.maps.ControlPosition.BLOCK_END_INLINE_START, - ], - [ - 'INLINE_START_BLOCK_END', - google.maps.ControlPosition.INLINE_START_BLOCK_END, - ], - [ - 'BLOCK_END_INLINE_CENTER', - google.maps.ControlPosition.BLOCK_END_INLINE_CENTER, - ], - [ - 'BLOCK_END_INLINE_END', - google.maps.ControlPosition.BLOCK_END_INLINE_END, - ], - [ - 'INLINE_END_BLOCK_END', - google.maps.ControlPosition.INLINE_END_BLOCK_END, - ], + const positions: (keyof typeof google.maps.ControlPosition)[] = [ + 'BLOCK_START_INLINE_START', + 'INLINE_START_BLOCK_START', + 'BLOCK_START_INLINE_CENTER', + 'BLOCK_START_INLINE_END', + 'INLINE_END_BLOCK_START', + 'INLINE_START_BLOCK_CENTER', + 'INLINE_END_BLOCK_CENTER', + 'BLOCK_END_INLINE_START', + 'INLINE_START_BLOCK_END', + 'BLOCK_END_INLINE_CENTER', + 'BLOCK_END_INLINE_END', + 'INLINE_END_BLOCK_END', ]; - for (let i = 0; i < controlText.length; i++) { - const divLabel = controlText[i][0] as string; + positions.forEach((position) => { const divName = document.createElement('div'); + const controlPosition = google.maps.ControlPosition[position]; - MakeControl(divName, divLabel); - innerMap.controls[controlText[i][1]].push(divName); + MakeControl(divName, position); divName.addEventListener('click', toggleRTL); - } + innerMap.controls[controlPosition].push(divName); + }); } /** From d3515b5bac391ff2f7e3a879e543011c6c0cd55f Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:44:18 -0800 Subject: [PATCH 09/13] Clean up package.json by removing empty dependencies Removed empty dependencies section from package.json --- samples/control-positioning-labels/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/samples/control-positioning-labels/package.json b/samples/control-positioning-labels/package.json index a8c9915e..197956e4 100644 --- a/samples/control-positioning-labels/package.json +++ b/samples/control-positioning-labels/package.json @@ -7,8 +7,5 @@ "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", "preview": "vite preview" - }, - "dependencies": { - } } From 98c496d1714875f9809f59946435ae51cac17fa6 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:44:46 -0800 Subject: [PATCH 10/13] Fix formatting of gmp-map center attribute --- samples/control-simple/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/control-simple/index.html b/samples/control-simple/index.html index 4df8112e..1b280145 100644 --- a/samples/control-simple/index.html +++ b/samples/control-simple/index.html @@ -16,7 +16,7 @@ ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); - + From f65b8758d6adb825c8cf7bde0f1d965dcab4af5f Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 11:45:55 -0800 Subject: [PATCH 11/13] Simplify library import for Google Maps --- samples/control-simple/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/samples/control-simple/index.ts b/samples/control-simple/index.ts index 67987473..279595a0 100644 --- a/samples/control-simple/index.ts +++ b/samples/control-simple/index.ts @@ -7,9 +7,7 @@ // [START maps_control_simple] async function initMap() { // Request the needed libraries. - const [{ Map }] = await Promise.all([ - google.maps.importLibrary('maps') as Promise, - ]); + await google.maps.importLibrary('maps'); const mapElement = document.querySelector( 'gmp-map' From 8a394428a779fcf3e11e5a137d698543a2538838 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 12:25:16 -0800 Subject: [PATCH 12/13] Update package.json --- samples/control-options/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/samples/control-options/package.json b/samples/control-options/package.json index ec274193..29c8cc5c 100644 --- a/samples/control-options/package.json +++ b/samples/control-options/package.json @@ -7,8 +7,5 @@ "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", "preview": "vite preview" - }, - "dependencies": { - } } From 8b19ef1d1546c758dbdbc6add77ac6e357674c61 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 12:26:03 -0800 Subject: [PATCH 13/13] Update package.json --- samples/control-simple/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/samples/control-simple/package.json b/samples/control-simple/package.json index df74e5bf..24bfcc54 100644 --- a/samples/control-simple/package.json +++ b/samples/control-simple/package.json @@ -7,8 +7,5 @@ "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", "preview": "vite preview" - }, - "dependencies": { - } }