From 6ef31d0aa83db6f5ea83bec8041d92a1df6b4b39 Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 13 Feb 2026 10:21:38 -0800 Subject: [PATCH] feat: Migrates the polyline-complex sample. --- samples/polyline-complex/README.md | 41 ++++++++++++++++++++ samples/polyline-complex/index.html | 26 +++++++++++++ samples/polyline-complex/index.ts | 53 ++++++++++++++++++++++++++ samples/polyline-complex/package.json | 14 +++++++ samples/polyline-complex/style.css | 18 +++++++++ samples/polyline-complex/tsconfig.json | 17 +++++++++ 6 files changed, 169 insertions(+) create mode 100644 samples/polyline-complex/README.md create mode 100644 samples/polyline-complex/index.html create mode 100644 samples/polyline-complex/index.ts create mode 100644 samples/polyline-complex/package.json create mode 100644 samples/polyline-complex/style.css create mode 100644 samples/polyline-complex/tsconfig.json diff --git a/samples/polyline-complex/README.md b/samples/polyline-complex/README.md new file mode 100644 index 000000000..eb4337157 --- /dev/null +++ b/samples/polyline-complex/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## polyline-complex + +THhis example demonstrates constructing a polyline based on clicks (click the map to add a vertex). + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/polyline-complex` +`npm start` + +### Build an individual example + +`cd samples/polyline-complex` +`npm run build` + +From 'samples': + +`npm run build --workspace=polyline-complex/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/polyline-complex` +`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/polyline-complex/index.html b/samples/polyline-complex/index.html new file mode 100644 index 000000000..2dfa972c2 --- /dev/null +++ b/samples/polyline-complex/index.html @@ -0,0 +1,26 @@ + + + + + + Complex Polylines + + + + + + + + + + + diff --git a/samples/polyline-complex/index.ts b/samples/polyline-complex/index.ts new file mode 100644 index 000000000..959b7f4a1 --- /dev/null +++ b/samples/polyline-complex/index.ts @@ -0,0 +1,53 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_polyline_complex] +/** + * This example creates an interactive map which constructs a polyline based on + * user clicks. Note that the polyline only appears once its path property + * contains two LatLng coordinates. + */ + +let poly: google.maps.Polyline; +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; + +async function initMap() { + // Import the needed libraries. + (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary; + (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary; + + innerMap = mapElement.innerMap; + + poly = new google.maps.Polyline({ + strokeColor: "#000000", + strokeOpacity: 1.0, + strokeWeight: 3, + }); + poly.setMap(innerMap); + + // Add a listener for the click event + innerMap.addListener("click", addLatLng); +} + +// Handles click events on a map, and adds a new point to the Polyline. +function addLatLng(event: google.maps.MapMouseEvent) { + const path = poly.getPath(); + + // Because path is an MVCArray, we can simply append a new coordinate + // and it will automatically appear. + path.push(event.latLng as google.maps.LatLng); + + // Add a new marker at the new plotted point on the polyline. + new google.maps.marker.AdvancedMarkerElement({ + position: event.latLng, + title: "#" + path.getLength(), + map: innerMap, + }); +} + +initMap(); +// [END maps_polyline_complex] diff --git a/samples/polyline-complex/package.json b/samples/polyline-complex/package.json new file mode 100644 index 000000000..f7374773c --- /dev/null +++ b/samples/polyline-complex/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/polyline-complex", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh polyline-complex && bash ../app.sh polyline-complex && bash ../docs.sh polyline-complex && npm run build:vite --workspace=. && bash ../dist.sh polyline-complex", + "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/polyline-complex/style.css b/samples/polyline-complex/style.css new file mode 100644 index 000000000..1c9905882 --- /dev/null +++ b/samples/polyline-complex/style.css @@ -0,0 +1,18 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_polyline_complex] */ + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_polyline_complex] */ \ No newline at end of file diff --git a/samples/polyline-complex/tsconfig.json b/samples/polyline-complex/tsconfig.json new file mode 100644 index 000000000..366aabb04 --- /dev/null +++ b/samples/polyline-complex/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" + } +}