From 9e42dbc624b587259c9a41d719992d49bdbc5ecb Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 28 Apr 2026 12:04:41 -0700 Subject: [PATCH 1/4] feat: Migrates the layer-bicycling sample to js-api-samples. --- samples/layer-bicycling/README.md | 41 +++++++++++++++++++++++++++ samples/layer-bicycling/index.html | 22 ++++++++++++++ samples/layer-bicycling/index.ts | 22 ++++++++++++++ samples/layer-bicycling/package.json | 12 ++++++++ samples/layer-bicycling/style.css | 17 +++++++++++ samples/layer-bicycling/tsconfig.json | 7 +++++ 6 files changed, 121 insertions(+) create mode 100644 samples/layer-bicycling/README.md create mode 100644 samples/layer-bicycling/index.html create mode 100644 samples/layer-bicycling/index.ts create mode 100644 samples/layer-bicycling/package.json create mode 100644 samples/layer-bicycling/style.css create mode 100644 samples/layer-bicycling/tsconfig.json diff --git a/samples/layer-bicycling/README.md b/samples/layer-bicycling/README.md new file mode 100644 index 000000000..25c38bc11 --- /dev/null +++ b/samples/layer-bicycling/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## layer-bicycling + +Bicycling layer sample. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/layer-bicycling` +`npm start` + +### Build an individual example + +`cd samples/layer-bicycling` +`npm run build` + +From 'samples': + +`npm run build --workspace=layer-bicycling/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/layer-bicycling` +`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/layer-bicycling/index.html b/samples/layer-bicycling/index.html new file mode 100644 index 000000000..80e6552e6 --- /dev/null +++ b/samples/layer-bicycling/index.html @@ -0,0 +1,22 @@ + + + + + + Bicycle Layer + + + + + + + + + + + diff --git a/samples/layer-bicycling/index.ts b/samples/layer-bicycling/index.ts new file mode 100644 index 000000000..648a0cc30 --- /dev/null +++ b/samples/layer-bicycling/index.ts @@ -0,0 +1,22 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_layer_bicycling] +async function initMap(): Promise { + await google.maps.importLibrary('maps'); + + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + const innerMap = mapElement.innerMap; + + const bikeLayer = new google.maps.BicyclingLayer(); + + bikeLayer.setMap(innerMap); +} + +initMap(); +// [END maps_layer_bicycling] diff --git a/samples/layer-bicycling/package.json b/samples/layer-bicycling/package.json new file mode 100644 index 000000000..bf27fe8f2 --- /dev/null +++ b/samples/layer-bicycling/package.json @@ -0,0 +1,12 @@ +{ + "name": "@js-api-samples/layer-bicycling", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh layer-bicycling && bash ../app.sh layer-bicycling && bash ../docs.sh layer-bicycling && npm run build:vite --workspace=. && bash ../dist.sh layer-bicycling", + "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/layer-bicycling/style.css b/samples/layer-bicycling/style.css new file mode 100644 index 000000000..fab09599d --- /dev/null +++ b/samples/layer-bicycling/style.css @@ -0,0 +1,17 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_layer_bicycling] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_layer_bicycling] */ diff --git a/samples/layer-bicycling/tsconfig.json b/samples/layer-bicycling/tsconfig.json new file mode 100644 index 000000000..d1d74fdad --- /dev/null +++ b/samples/layer-bicycling/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "." + }, + "include": ["./*.ts"] +} From 5d89954ea61896c3570e7ef65ed517e92b21286b Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 6 May 2026 07:28:00 -0700 Subject: [PATCH 2/4] Update copyright year in style.css --- samples/layer-bicycling/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/layer-bicycling/style.css b/samples/layer-bicycling/style.css index fab09599d..574dd8eae 100644 --- a/samples/layer-bicycling/style.css +++ b/samples/layer-bicycling/style.css @@ -1,6 +1,6 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_layer_bicycling] */ From e9a8a0b8b5b6a3e8f5b10f2c143d021bebfde617 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 6 May 2026 07:40:27 -0700 Subject: [PATCH 3/4] Update tsconfig.json --- samples/layer-bicycling/tsconfig.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/samples/layer-bicycling/tsconfig.json b/samples/layer-bicycling/tsconfig.json index d1d74fdad..976bcc6ef 100644 --- a/samples/layer-bicycling/tsconfig.json +++ b/samples/layer-bicycling/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "." - }, - "include": ["./*.ts"] + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "." + }, + "include": ["./*.ts"] } From 00fcd3194b933dbf26759d622ae850ed3e3b622a Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 16 Jul 2026 10:52:33 -0700 Subject: [PATCH 4/4] Refactor layer-bicycling sample to modern patterns --- samples/layer-bicycling/index.html | 14 ++++++++++---- samples/layer-bicycling/index.ts | 12 +++++------- samples/layer-bicycling/package.json | 20 ++++++++++---------- 3 files changed, 25 insertions(+), 21 deletions(-) diff --git a/samples/layer-bicycling/index.html b/samples/layer-bicycling/index.html index 80e6552e6..c154bd45e 100644 --- a/samples/layer-bicycling/index.html +++ b/samples/layer-bicycling/index.html @@ -11,12 +11,18 @@ - - + - + diff --git a/samples/layer-bicycling/index.ts b/samples/layer-bicycling/index.ts index 648a0cc30..04d08b5d7 100644 --- a/samples/layer-bicycling/index.ts +++ b/samples/layer-bicycling/index.ts @@ -5,18 +5,16 @@ */ // [START maps_layer_bicycling] -async function initMap(): Promise { - await google.maps.importLibrary('maps'); +async function init(): Promise { + const { BicyclingLayer } = await google.maps.importLibrary('maps'); - const mapElement = document.querySelector( - 'gmp-map' - ) as google.maps.MapElement; + const mapElement = document.querySelector('gmp-map')!; const innerMap = mapElement.innerMap; - const bikeLayer = new google.maps.BicyclingLayer(); + const bikeLayer = new BicyclingLayer(); bikeLayer.setMap(innerMap); } -initMap(); +void init(); // [END maps_layer_bicycling] diff --git a/samples/layer-bicycling/package.json b/samples/layer-bicycling/package.json index bf27fe8f2..d9f99667c 100644 --- a/samples/layer-bicycling/package.json +++ b/samples/layer-bicycling/package.json @@ -1,12 +1,12 @@ { - "name": "@js-api-samples/layer-bicycling", - "version": "1.0.0", - "scripts": { - "build": "tsc && bash ../jsfiddle.sh layer-bicycling && bash ../app.sh layer-bicycling && bash ../docs.sh layer-bicycling && npm run build:vite --workspace=. && bash ../dist.sh layer-bicycling", - "test": "tsc && npm run build:vite --workspace=.", - "start": "tsc && vite build --base './' && vite", - "build:vite": "vite build --base './'", - "preview": "vite preview" - }, - "dependencies": {} + "name": "@js-api-samples/layer-bicycling", + "version": "1.0.0", + "scripts": { + "build": "bash ../build-single.sh", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --config ../../vite.config.js --base './' && vite --config ../../vite.config.js", + "build:vite": "vite build --config ../../vite.config.js --base './'", + "preview": "vite preview --config ../../vite.config.js" + }, + "author": "Google LLC" }