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..70397f17 --- /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..e443c040 --- /dev/null +++ b/samples/control-disableUI/index.ts @@ -0,0 +1,27 @@ +/** + * @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. + await google.maps.importLibrary('maps'); + + 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..2598168b --- /dev/null +++ b/samples/control-disableUI/package.json @@ -0,0 +1,11 @@ +{ + "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" + } +} 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..1c5c1658 --- /dev/null +++ b/samples/control-options/index.ts @@ -0,0 +1,37 @@ +/** + * @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. + await google.maps.importLibrary('maps'); + + 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: [ + google.maps.MapTypeId.ROADMAP, + google.maps.MapTypeId.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..29c8cc5c --- /dev/null +++ b/samples/control-options/package.json @@ -0,0 +1,11 @@ +{ + "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" + } +} 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..a0995cf5 --- /dev/null +++ b/samples/control-positioning-labels/index.ts @@ -0,0 +1,84 @@ +/** + * @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. + await google.maps.importLibrary('maps'); + + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + const innerMap = mapElement.innerMap; + + 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', + ]; + + positions.forEach((position) => { + const divName = document.createElement('div'); + const controlPosition = google.maps.ControlPosition[position]; + + MakeControl(divName, position); + divName.addEventListener('click', toggleRTL); + innerMap.controls[controlPosition].push(divName); + }); +} + +/** + * 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..197956e4 --- /dev/null +++ b/samples/control-positioning-labels/package.json @@ -0,0 +1,11 @@ +{ + "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" + } +} 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..1b280145 --- /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..279595a0 --- /dev/null +++ b/samples/control-simple/index.ts @@ -0,0 +1,26 @@ +/** + * @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. + await google.maps.importLibrary('maps'); + + 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..24bfcc54 --- /dev/null +++ b/samples/control-simple/package.json @@ -0,0 +1,11 @@ +{ + "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" + } +} 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" + } +}