diff --git a/samples/polyline-remove/README.md b/samples/polyline-remove/README.md new file mode 100644 index 00000000..852a3b30 --- /dev/null +++ b/samples/polyline-remove/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## polyline-remove + +This sample shows how to remove a polyline from a map. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/polyline-remove` +`npm start` + +### Build an individual example + +`cd samples/polyline-remove` +`npm run build` + +From 'samples': + +`npm run build --workspace=polyline-remove/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/polyline-remove` +`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-remove/index.html b/samples/polyline-remove/index.html new file mode 100644 index 00000000..3cd288ba --- /dev/null +++ b/samples/polyline-remove/index.html @@ -0,0 +1,27 @@ + + + + + + Removing Polylines + + + + + + + + +
+ + +
+
+ + + diff --git a/samples/polyline-remove/index.ts b/samples/polyline-remove/index.ts new file mode 100644 index 00000000..ad6545ca --- /dev/null +++ b/samples/polyline-remove/index.ts @@ -0,0 +1,52 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_polyline_remove] +// This example adds a UI control allowing users to remove the polyline +// from the map. + +let flightPath: google.maps.Polyline; +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; + +async function initMap() { + await google.maps.importLibrary('maps'); + innerMap = mapElement.innerMap; + + const flightPathCoordinates: google.maps.LatLngLiteral[] = [ + { lat: 37.772, lng: -122.214 }, + { lat: 21.291, lng: -157.821 }, + { lat: -18.142, lng: 178.431 }, + { lat: -27.467, lng: 153.027 }, + ]; + + flightPath = new google.maps.Polyline({ + path: flightPathCoordinates, + strokeColor: '#FF0000', + strokeOpacity: 1.0, + strokeWeight: 2, + }); + + // add event listener for click event + document.getElementById('add-line')!.addEventListener('click', addLine); + document + .getElementById('remove-line')! + .addEventListener('click', removeLine); + + // initialize with line + addLine(); +} + +function addLine(): void { + flightPath.setMap(innerMap); +} + +function removeLine(): void { + flightPath.setMap(null); +} + +initMap(); +// [END maps_polyline_remove] diff --git a/samples/polyline-remove/package.json b/samples/polyline-remove/package.json new file mode 100644 index 00000000..5a6e830c --- /dev/null +++ b/samples/polyline-remove/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/polyline-remove", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh polyline-remove && bash ../app.sh polyline-remove && bash ../docs.sh polyline-remove && npm run build:vite --workspace=. && bash ../dist.sh polyline-remove", + "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-remove/style.css b/samples/polyline-remove/style.css new file mode 100644 index 00000000..0160feea --- /dev/null +++ b/samples/polyline-remove/style.css @@ -0,0 +1,39 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_polyline_remove] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +#floating-panel { + position: absolute; + top: 10px; + left: 25%; + z-index: 5; + background-color: #fff; + padding: 5px; + border: 1px solid #999; + text-align: center; + font-family: "Roboto", "sans-serif"; + line-height: 30px; + padding-left: 10px; +} + +/* [END maps_polyline_remove] */ \ No newline at end of file diff --git a/samples/polyline-remove/tsconfig.json b/samples/polyline-remove/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/polyline-remove/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" + } +}