diff --git a/dist/index.html b/dist/index.html index 73a95d6b..53915a71 100644 --- a/dist/index.html +++ b/dist/index.html @@ -54,6 +54,10 @@

Maps JSAPI Samples

  • boundaries-click
  • boundaries-simple
  • boundaries-text-search
    • +
  • control-disableUI
    • +
  • control-options
    • +
  • control-positioning-labels
    • +
  • control-simple
  • dds-region-viewer
  • deckgl-heatmap
  • deckgl-kml
    • diff --git a/dist/samples/control-disableUI/app/.eslintsrc.json b/dist/samples/control-disableUI/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/control-disableUI/app/.eslintsrc.json @@ -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 + } +} diff --git a/dist/samples/control-disableUI/app/README.md b/dist/samples/control-disableUI/app/README.md new file mode 100644 index 00000000..e7d6b7d3 --- /dev/null +++ b/dist/samples/control-disableUI/app/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/dist/samples/control-disableUI/app/index.html b/dist/samples/control-disableUI/app/index.html new file mode 100644 index 00000000..70397f17 --- /dev/null +++ b/dist/samples/control-disableUI/app/index.html @@ -0,0 +1,22 @@ + + + + + + Disabling the Default UI + + + + + + + + + + + diff --git a/dist/samples/control-disableUI/app/index.ts b/dist/samples/control-disableUI/app/index.ts new file mode 100644 index 00000000..e443c040 --- /dev/null +++ b/dist/samples/control-disableUI/app/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/dist/samples/control-disableUI/app/package.json b/dist/samples/control-disableUI/app/package.json new file mode 100644 index 00000000..2598168b --- /dev/null +++ b/dist/samples/control-disableUI/app/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/dist/samples/control-disableUI/app/style.css b/dist/samples/control-disableUI/app/style.css new file mode 100644 index 00000000..b1261ce3 --- /dev/null +++ b/dist/samples/control-disableUI/app/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/dist/samples/control-disableUI/app/tsconfig.json b/dist/samples/control-disableUI/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/control-disableUI/app/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/dist/samples/control-disableUI/dist/assets/index-BZDSROJH.css b/dist/samples/control-disableUI/dist/assets/index-BZDSROJH.css new file mode 100644 index 00000000..59d9a4df --- /dev/null +++ b/dist/samples/control-disableUI/dist/assets/index-BZDSROJH.css @@ -0,0 +1 @@ +gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/control-disableUI/dist/assets/index-DRmUOhOs.js b/dist/samples/control-disableUI/dist/assets/index-DRmUOhOs.js new file mode 100644 index 00000000..0656c63b --- /dev/null +++ b/dist/samples/control-disableUI/dist/assets/index-DRmUOhOs.js @@ -0,0 +1 @@ +(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const o of t.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();async function c(){await google.maps.importLibrary("maps"),document.querySelector("gmp-map").innerMap.setOptions({disableDefaultUI:!0})}c(); diff --git a/dist/samples/control-disableUI/dist/index.html b/dist/samples/control-disableUI/dist/index.html new file mode 100644 index 00000000..8ebc3567 --- /dev/null +++ b/dist/samples/control-disableUI/dist/index.html @@ -0,0 +1,22 @@ + + + + + + Disabling the Default UI + + + + + + + + + + + diff --git a/dist/samples/control-disableUI/docs/index.html b/dist/samples/control-disableUI/docs/index.html new file mode 100644 index 00000000..70397f17 --- /dev/null +++ b/dist/samples/control-disableUI/docs/index.html @@ -0,0 +1,22 @@ + + + + + + Disabling the Default UI + + + + + + + + + + + diff --git a/dist/samples/control-disableUI/docs/index.js b/dist/samples/control-disableUI/docs/index.js new file mode 100644 index 00000000..dd6ccd43 --- /dev/null +++ b/dist/samples/control-disableUI/docs/index.js @@ -0,0 +1,21 @@ +"use strict"; +/** + * @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'); + 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/dist/samples/control-disableUI/docs/index.ts b/dist/samples/control-disableUI/docs/index.ts new file mode 100644 index 00000000..e443c040 --- /dev/null +++ b/dist/samples/control-disableUI/docs/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/dist/samples/control-disableUI/docs/style.css b/dist/samples/control-disableUI/docs/style.css new file mode 100644 index 00000000..b1261ce3 --- /dev/null +++ b/dist/samples/control-disableUI/docs/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/dist/samples/control-disableUI/jsfiddle/demo.css b/dist/samples/control-disableUI/jsfiddle/demo.css new file mode 100644 index 00000000..0993c0b4 --- /dev/null +++ b/dist/samples/control-disableUI/jsfiddle/demo.css @@ -0,0 +1,24 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * 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; +} + diff --git a/dist/samples/control-disableUI/jsfiddle/demo.details b/dist/samples/control-disableUI/jsfiddle/demo.details new file mode 100644 index 00000000..b12f255d --- /dev/null +++ b/dist/samples/control-disableUI/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: control-disableUI +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/control-disableUI/jsfiddle/demo.html b/dist/samples/control-disableUI/jsfiddle/demo.html new file mode 100644 index 00000000..8487ef06 --- /dev/null +++ b/dist/samples/control-disableUI/jsfiddle/demo.html @@ -0,0 +1,22 @@ + + + + + + Disabling the Default UI + + + + + + + + + + + diff --git a/dist/samples/control-disableUI/jsfiddle/demo.js b/dist/samples/control-disableUI/jsfiddle/demo.js new file mode 100644 index 00000000..232b0ff3 --- /dev/null +++ b/dist/samples/control-disableUI/jsfiddle/demo.js @@ -0,0 +1,21 @@ +"use strict"; +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +async function initMap() { + // Request the needed libraries. + await google.maps.importLibrary('maps'); + const mapElement = document.querySelector('gmp-map'); + const innerMap = mapElement.innerMap; + + innerMap.setOptions({ + // Disable the default UI. + disableDefaultUI: true, + }); + +} +initMap(); + diff --git a/dist/samples/control-options/app/.eslintsrc.json b/dist/samples/control-options/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/control-options/app/.eslintsrc.json @@ -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 + } +} diff --git a/dist/samples/control-options/app/README.md b/dist/samples/control-options/app/README.md new file mode 100644 index 00000000..3293f2e6 --- /dev/null +++ b/dist/samples/control-options/app/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/dist/samples/control-options/app/index.html b/dist/samples/control-options/app/index.html new file mode 100644 index 00000000..9ac1fefd --- /dev/null +++ b/dist/samples/control-options/app/index.html @@ -0,0 +1,22 @@ + + + + + + Control Options + + + + + + + + + + + diff --git a/dist/samples/control-options/app/index.ts b/dist/samples/control-options/app/index.ts new file mode 100755 index 00000000..1c5c1658 --- /dev/null +++ b/dist/samples/control-options/app/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/dist/samples/control-options/app/package.json b/dist/samples/control-options/app/package.json new file mode 100644 index 00000000..29c8cc5c --- /dev/null +++ b/dist/samples/control-options/app/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/dist/samples/control-options/app/style.css b/dist/samples/control-options/app/style.css new file mode 100644 index 00000000..f9a1e19e --- /dev/null +++ b/dist/samples/control-options/app/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/dist/samples/control-options/app/tsconfig.json b/dist/samples/control-options/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/control-options/app/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/dist/samples/control-options/dist/assets/index-BZDSROJH.css b/dist/samples/control-options/dist/assets/index-BZDSROJH.css new file mode 100644 index 00000000..59d9a4df --- /dev/null +++ b/dist/samples/control-options/dist/assets/index-BZDSROJH.css @@ -0,0 +1 @@ +gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/control-options/dist/assets/index-PFMax1Kk.js b/dist/samples/control-options/dist/assets/index-PFMax1Kk.js new file mode 100644 index 00000000..ac51fc08 --- /dev/null +++ b/dist/samples/control-options/dist/assets/index-PFMax1Kk.js @@ -0,0 +1 @@ +(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const r of t.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&n(r)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();async function p(){await google.maps.importLibrary("maps"),document.querySelector("gmp-map").innerMap.setOptions({mapTypeControl:!0,mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,mapTypeIds:[google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.TERRAIN],position:google.maps.ControlPosition.TOP_CENTER}})}p(); diff --git a/dist/samples/control-options/dist/index.html b/dist/samples/control-options/dist/index.html new file mode 100644 index 00000000..3a5ec5e8 --- /dev/null +++ b/dist/samples/control-options/dist/index.html @@ -0,0 +1,22 @@ + + + + + + Control Options + + + + + + + + + + + diff --git a/dist/samples/control-options/docs/index.html b/dist/samples/control-options/docs/index.html new file mode 100644 index 00000000..9ac1fefd --- /dev/null +++ b/dist/samples/control-options/docs/index.html @@ -0,0 +1,22 @@ + + + + + + Control Options + + + + + + + + + + + diff --git a/dist/samples/control-options/docs/index.js b/dist/samples/control-options/docs/index.js new file mode 100644 index 00000000..5ec48e00 --- /dev/null +++ b/dist/samples/control-options/docs/index.js @@ -0,0 +1,30 @@ +"use strict"; +/** + * @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'); + 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/dist/samples/control-options/docs/index.ts b/dist/samples/control-options/docs/index.ts new file mode 100755 index 00000000..1c5c1658 --- /dev/null +++ b/dist/samples/control-options/docs/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/dist/samples/control-options/docs/style.css b/dist/samples/control-options/docs/style.css new file mode 100644 index 00000000..f9a1e19e --- /dev/null +++ b/dist/samples/control-options/docs/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/dist/samples/control-options/jsfiddle/demo.css b/dist/samples/control-options/jsfiddle/demo.css new file mode 100644 index 00000000..0993c0b4 --- /dev/null +++ b/dist/samples/control-options/jsfiddle/demo.css @@ -0,0 +1,24 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * 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; +} + diff --git a/dist/samples/control-options/jsfiddle/demo.details b/dist/samples/control-options/jsfiddle/demo.details new file mode 100644 index 00000000..0c9a3e27 --- /dev/null +++ b/dist/samples/control-options/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: control-options +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/control-options/jsfiddle/demo.html b/dist/samples/control-options/jsfiddle/demo.html new file mode 100644 index 00000000..ebeac9ed --- /dev/null +++ b/dist/samples/control-options/jsfiddle/demo.html @@ -0,0 +1,22 @@ + + + + + + Control Options + + + + + + + + + + + diff --git a/dist/samples/control-options/jsfiddle/demo.js b/dist/samples/control-options/jsfiddle/demo.js new file mode 100644 index 00000000..247acfbf --- /dev/null +++ b/dist/samples/control-options/jsfiddle/demo.js @@ -0,0 +1,30 @@ +"use strict"; +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// 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'); + const innerMap = mapElement.innerMap; + + 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, + }, + }); + +} +initMap(); + diff --git a/dist/samples/control-positioning-labels/app/.eslintsrc.json b/dist/samples/control-positioning-labels/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/control-positioning-labels/app/.eslintsrc.json @@ -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 + } +} diff --git a/dist/samples/control-positioning-labels/app/README.md b/dist/samples/control-positioning-labels/app/README.md new file mode 100644 index 00000000..462bb29d --- /dev/null +++ b/dist/samples/control-positioning-labels/app/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/dist/samples/control-positioning-labels/app/index.html b/dist/samples/control-positioning-labels/app/index.html new file mode 100644 index 00000000..2697baad --- /dev/null +++ b/dist/samples/control-positioning-labels/app/index.html @@ -0,0 +1,23 @@ + + + + + + Control Positioning Labels + + + + + + + + + + + + diff --git a/dist/samples/control-positioning-labels/app/index.ts b/dist/samples/control-positioning-labels/app/index.ts new file mode 100644 index 00000000..a0995cf5 --- /dev/null +++ b/dist/samples/control-positioning-labels/app/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/dist/samples/control-positioning-labels/app/package.json b/dist/samples/control-positioning-labels/app/package.json new file mode 100644 index 00000000..197956e4 --- /dev/null +++ b/dist/samples/control-positioning-labels/app/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/dist/samples/control-positioning-labels/app/style.css b/dist/samples/control-positioning-labels/app/style.css new file mode 100644 index 00000000..6f59ec33 --- /dev/null +++ b/dist/samples/control-positioning-labels/app/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/dist/samples/control-positioning-labels/app/tsconfig.json b/dist/samples/control-positioning-labels/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/control-positioning-labels/app/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/dist/samples/control-positioning-labels/dist/assets/index-BZDSROJH.css b/dist/samples/control-positioning-labels/dist/assets/index-BZDSROJH.css new file mode 100644 index 00000000..59d9a4df --- /dev/null +++ b/dist/samples/control-positioning-labels/dist/assets/index-BZDSROJH.css @@ -0,0 +1 @@ +gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/control-positioning-labels/dist/assets/index-Chx3KJ5J.js b/dist/samples/control-positioning-labels/dist/assets/index-Chx3KJ5J.js new file mode 100644 index 00000000..9ef5310e --- /dev/null +++ b/dist/samples/control-positioning-labels/dist/assets/index-Chx3KJ5J.js @@ -0,0 +1 @@ +(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const c of t.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&n(c)}).observe(document,{childList:!0,subtree:!0});function o(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();async function s(r,i){const o=document.createElement("div");o.style.backgroundColor="#fff",o.style.padding="3px",o.style.cursor="pointer",o.style.textAlign="center",o.title="Click to toggle RTL/LTR",o.className="controlUI",r.appendChild(o);const n=document.createElement("div");n.style.fontSize="12px",n.innerHTML=i,n.className="controlText",o.appendChild(n)}async function l(){await google.maps.importLibrary("maps");const i=document.querySelector("gmp-map").innerMap;["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"].forEach(n=>{const e=document.createElement("div"),t=google.maps.ControlPosition[n];s(e,n),e.addEventListener("click",a),i.controls[t].push(e)})}async function a(){const r=document.documentElement;r.dir==="rtl"?r.dir="ltr":r.dir="rtl"}l(); diff --git a/dist/samples/control-positioning-labels/dist/index.html b/dist/samples/control-positioning-labels/dist/index.html new file mode 100644 index 00000000..93ab7672 --- /dev/null +++ b/dist/samples/control-positioning-labels/dist/index.html @@ -0,0 +1,23 @@ + + + + + + Control Positioning Labels + + + + + + + + + + + + diff --git a/dist/samples/control-positioning-labels/docs/index.html b/dist/samples/control-positioning-labels/docs/index.html new file mode 100644 index 00000000..2697baad --- /dev/null +++ b/dist/samples/control-positioning-labels/docs/index.html @@ -0,0 +1,23 @@ + + + + + + Control Positioning Labels + + + + + + + + + + + + diff --git a/dist/samples/control-positioning-labels/docs/index.js b/dist/samples/control-positioning-labels/docs/index.js new file mode 100644 index 00000000..5bf2801e --- /dev/null +++ b/dist/samples/control-positioning-labels/docs/index.js @@ -0,0 +1,73 @@ +"use strict"; +/** + * @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, label) { + // 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'); + const innerMap = mapElement.innerMap; + const positions = [ + '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/dist/samples/control-positioning-labels/docs/index.ts b/dist/samples/control-positioning-labels/docs/index.ts new file mode 100644 index 00000000..a0995cf5 --- /dev/null +++ b/dist/samples/control-positioning-labels/docs/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/dist/samples/control-positioning-labels/docs/style.css b/dist/samples/control-positioning-labels/docs/style.css new file mode 100644 index 00000000..6f59ec33 --- /dev/null +++ b/dist/samples/control-positioning-labels/docs/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/dist/samples/control-positioning-labels/jsfiddle/demo.css b/dist/samples/control-positioning-labels/jsfiddle/demo.css new file mode 100644 index 00000000..fca9eb90 --- /dev/null +++ b/dist/samples/control-positioning-labels/jsfiddle/demo.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * 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; +} + + diff --git a/dist/samples/control-positioning-labels/jsfiddle/demo.details b/dist/samples/control-positioning-labels/jsfiddle/demo.details new file mode 100644 index 00000000..9546f7d8 --- /dev/null +++ b/dist/samples/control-positioning-labels/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: control-positioning-labels +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/control-positioning-labels/jsfiddle/demo.html b/dist/samples/control-positioning-labels/jsfiddle/demo.html new file mode 100644 index 00000000..3de71f69 --- /dev/null +++ b/dist/samples/control-positioning-labels/jsfiddle/demo.html @@ -0,0 +1,23 @@ + + + + + + Control Positioning Labels + + + + + + + + + + + + diff --git a/dist/samples/control-positioning-labels/jsfiddle/demo.js b/dist/samples/control-positioning-labels/jsfiddle/demo.js new file mode 100644 index 00000000..0d27276d --- /dev/null +++ b/dist/samples/control-positioning-labels/jsfiddle/demo.js @@ -0,0 +1,73 @@ +"use strict"; +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/** + * 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, label) { + // 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'); + const innerMap = mapElement.innerMap; + const positions = [ + '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(); + diff --git a/dist/samples/control-simple/app/.eslintsrc.json b/dist/samples/control-simple/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/control-simple/app/.eslintsrc.json @@ -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 + } +} diff --git a/dist/samples/control-simple/app/README.md b/dist/samples/control-simple/app/README.md new file mode 100644 index 00000000..f0a26e88 --- /dev/null +++ b/dist/samples/control-simple/app/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/dist/samples/control-simple/app/index.html b/dist/samples/control-simple/app/index.html new file mode 100644 index 00000000..1b280145 --- /dev/null +++ b/dist/samples/control-simple/app/index.html @@ -0,0 +1,22 @@ + + + + + + Adding Controls to the Map + + + + + + + + + + + diff --git a/dist/samples/control-simple/app/index.ts b/dist/samples/control-simple/app/index.ts new file mode 100644 index 00000000..279595a0 --- /dev/null +++ b/dist/samples/control-simple/app/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/dist/samples/control-simple/app/package.json b/dist/samples/control-simple/app/package.json new file mode 100644 index 00000000..24bfcc54 --- /dev/null +++ b/dist/samples/control-simple/app/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/dist/samples/control-simple/app/style.css b/dist/samples/control-simple/app/style.css new file mode 100644 index 00000000..d5b7abd3 --- /dev/null +++ b/dist/samples/control-simple/app/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/dist/samples/control-simple/app/tsconfig.json b/dist/samples/control-simple/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/control-simple/app/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/dist/samples/control-simple/dist/assets/index-6eGNlTRY.js b/dist/samples/control-simple/dist/assets/index-6eGNlTRY.js new file mode 100644 index 00000000..8dec9052 --- /dev/null +++ b/dist/samples/control-simple/dist/assets/index-6eGNlTRY.js @@ -0,0 +1 @@ +(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const o of t.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();async function c(){await google.maps.importLibrary("maps"),document.querySelector("gmp-map").innerMap.setOptions({cameraControl:!1,scaleControl:!0})}c(); diff --git a/dist/samples/control-simple/dist/assets/index-BZDSROJH.css b/dist/samples/control-simple/dist/assets/index-BZDSROJH.css new file mode 100644 index 00000000..59d9a4df --- /dev/null +++ b/dist/samples/control-simple/dist/assets/index-BZDSROJH.css @@ -0,0 +1 @@ +gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/control-simple/dist/index.html b/dist/samples/control-simple/dist/index.html new file mode 100644 index 00000000..711d11cf --- /dev/null +++ b/dist/samples/control-simple/dist/index.html @@ -0,0 +1,22 @@ + + + + + + Adding Controls to the Map + + + + + + + + + + + diff --git a/dist/samples/control-simple/docs/index.html b/dist/samples/control-simple/docs/index.html new file mode 100644 index 00000000..1b280145 --- /dev/null +++ b/dist/samples/control-simple/docs/index.html @@ -0,0 +1,22 @@ + + + + + + Adding Controls to the Map + + + + + + + + + + + diff --git a/dist/samples/control-simple/docs/index.js b/dist/samples/control-simple/docs/index.js new file mode 100644 index 00000000..3209a47a --- /dev/null +++ b/dist/samples/control-simple/docs/index.js @@ -0,0 +1,21 @@ +"use strict"; +/** + * @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'); + 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/dist/samples/control-simple/docs/index.ts b/dist/samples/control-simple/docs/index.ts new file mode 100644 index 00000000..279595a0 --- /dev/null +++ b/dist/samples/control-simple/docs/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/dist/samples/control-simple/docs/style.css b/dist/samples/control-simple/docs/style.css new file mode 100644 index 00000000..d5b7abd3 --- /dev/null +++ b/dist/samples/control-simple/docs/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/dist/samples/control-simple/jsfiddle/demo.css b/dist/samples/control-simple/jsfiddle/demo.css new file mode 100644 index 00000000..0993c0b4 --- /dev/null +++ b/dist/samples/control-simple/jsfiddle/demo.css @@ -0,0 +1,24 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * 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; +} + diff --git a/dist/samples/control-simple/jsfiddle/demo.details b/dist/samples/control-simple/jsfiddle/demo.details new file mode 100644 index 00000000..4a150106 --- /dev/null +++ b/dist/samples/control-simple/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: control-simple +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/control-simple/jsfiddle/demo.html b/dist/samples/control-simple/jsfiddle/demo.html new file mode 100644 index 00000000..21aa85c8 --- /dev/null +++ b/dist/samples/control-simple/jsfiddle/demo.html @@ -0,0 +1,22 @@ + + + + + + Adding Controls to the Map + + + + + + + + + + + diff --git a/dist/samples/control-simple/jsfiddle/demo.js b/dist/samples/control-simple/jsfiddle/demo.js new file mode 100644 index 00000000..34183f7b --- /dev/null +++ b/dist/samples/control-simple/jsfiddle/demo.js @@ -0,0 +1,21 @@ +"use strict"; +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +async function initMap() { + // Request the needed libraries. + await google.maps.importLibrary('maps'); + const mapElement = document.querySelector('gmp-map'); + const innerMap = mapElement.innerMap; + + innerMap.setOptions({ + cameraControl: false, + scaleControl: true, + }); + +} +initMap(); + diff --git a/index.html b/index.html index 73a95d6b..53915a71 100644 --- a/index.html +++ b/index.html @@ -54,6 +54,10 @@

    Maps JSAPI Samples

  • boundaries-click
  • boundaries-simple
  • boundaries-text-search
    • +
  • control-disableUI
    • +
  • control-options
    • +
  • control-positioning-labels
    • +
  • control-simple
  • dds-region-viewer
  • deckgl-heatmap
  • deckgl-kml
    • diff --git a/package-lock.json b/package-lock.json index d009986d..8f9acfee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1384,6 +1384,22 @@ "resolved": "samples/boundaries-text-search", "link": true }, + "node_modules/@js-api-samples/control-disableUI": { + "resolved": "samples/control-disableUI", + "link": true + }, + "node_modules/@js-api-samples/control-options": { + "resolved": "samples/control-options", + "link": true + }, + "node_modules/@js-api-samples/control-positioning-labels": { + "resolved": "samples/control-positioning-labels", + "link": true + }, + "node_modules/@js-api-samples/control-simple": { + "resolved": "samples/control-simple", + "link": true + }, "node_modules/@js-api-samples/dds-region-viewer": { "resolved": "samples/dds-region-viewer", "link": true @@ -5826,6 +5842,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -5847,6 +5864,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -5868,6 +5886,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -5889,6 +5908,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -5910,6 +5930,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -5931,6 +5952,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -5952,6 +5974,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -5973,6 +5996,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -5994,6 +6018,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -6015,6 +6040,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -6036,6 +6062,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -8308,6 +8335,22 @@ "name": "@js-api-samples/boundaries-text-search", "version": "1.0.0" }, + "samples/control-disableUI": { + "name": "@js-api-samples/control-disableUI", + "version": "1.0.0" + }, + "samples/control-options": { + "name": "@js-api-samples/control-options", + "version": "1.0.0" + }, + "samples/control-positioning-labels": { + "name": "@js-api-samples/control-positioning-labels", + "version": "1.0.0" + }, + "samples/control-simple": { + "name": "@js-api-samples/control-simple", + "version": "1.0.0" + }, "samples/dds-region-viewer": { "name": "@js-api-samples/dds-region-viewer", "version": "1.0.0" @@ -8543,7 +8586,7 @@ "name": "@js-api-samples/react-ui-kit-place-details-latlng-compact", "version": "1.0.0", "dependencies": { - "@vis.gl/react-google-maps": "*", + "@vis.gl/react-google-maps": "latest", "react": "^19.2.1", "react-dom": "^19.2.3" },