googlemaps-samples · anglarett · Jun 16, 2025 · Jun 16, 2025 · Jun 16, 2025 · Jun 16, 2025
diff --git a/samples/map-drawing-terradraw/README.md b/samples/map-drawing-terradraw/README.md
@@ -0,0 +1,40 @@
+# Basic Terra Draw with Google Maps API Sample
+
+This sample demonstrates a basic implementation of Terra Draw with the Google Maps JavaScript API. It includes various drawing modes such as Point, LineString, Polygon, Rectangle, Circle, and Freehand.
+
+![Roadmap View](./screenshots/roadmap-draw.png)
+![Satellite View](./screenshots/satellite-draw.png)
+
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`$npm i`
+
+### Run an example on a local web server
+
+First `cd` to the folder for the sample to run, then:
+
+`$npm start`
+
+### Build an individual example
+
+From `samples/`:
+
+`$npm run build --workspace=sample-name/`
+
+### Build all of the examples.
+
+From `samples/`:
+`$npm run build-all`
+
+## 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/map-drawing-terradraw/img/circle.svg b/samples/map-drawing-terradraw/img/circle.svg
diff --git a/samples/map-drawing-terradraw/img/cursor.svg b/samples/map-drawing-terradraw/img/cursor.svg
diff --git a/samples/map-drawing-terradraw/img/delete-selected.svg b/samples/map-drawing-terradraw/img/delete-selected.svg
diff --git a/samples/map-drawing-terradraw/img/delete.svg b/samples/map-drawing-terradraw/img/delete.svg
diff --git a/samples/map-drawing-terradraw/img/download.svg b/samples/map-drawing-terradraw/img/download.svg
diff --git a/samples/map-drawing-terradraw/img/drawing-icons.png b/samples/map-drawing-terradraw/img/drawing-icons.png
diff --git a/samples/map-drawing-terradraw/img/freehand.svg b/samples/map-drawing-terradraw/img/freehand.svg
diff --git a/samples/map-drawing-terradraw/img/point.svg b/samples/map-drawing-terradraw/img/point.svg
diff --git a/samples/map-drawing-terradraw/img/polygon.png b/samples/map-drawing-terradraw/img/polygon.png
diff --git a/samples/map-drawing-terradraw/img/polyline.svg b/samples/map-drawing-terradraw/img/polyline.svg
diff --git a/samples/map-drawing-terradraw/img/rectangle.svg b/samples/map-drawing-terradraw/img/rectangle.svg
diff --git a/samples/map-drawing-terradraw/img/redo.svg b/samples/map-drawing-terradraw/img/redo.svg
diff --git a/samples/map-drawing-terradraw/img/resize.svg b/samples/map-drawing-terradraw/img/resize.svg
diff --git a/samples/map-drawing-terradraw/img/rotate.svg b/samples/map-drawing-terradraw/img/rotate.svg
diff --git a/samples/map-drawing-terradraw/img/select.svg b/samples/map-drawing-terradraw/img/select.svg
diff --git a/samples/map-drawing-terradraw/img/undo.svg b/samples/map-drawing-terradraw/img/undo.svg
diff --git a/samples/map-drawing-terradraw/img/upload.svg b/samples/map-drawing-terradraw/img/upload.svg
diff --git a/samples/map-drawing-terradraw/index.html b/samples/map-drawing-terradraw/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Terra Draw with Google Maps API Sample</title>
+    <link rel="stylesheet" href="./style.css">
+    <!-- Terra Draw CSS (if any needed, add here) -->
+</head>
+<body>
+    <!-- Map Container -->
+    <div id="map"></div>
+
+    <!-- Top-right mode selection UI -->
+    <div id="mode-ui">
+        <button id="point-mode" class="mode-button" title="Point"><img src="./img/point.svg" alt="Point" draggable="false"></button>
+        <button id="linestring-mode" class="mode-button" title="Linestring"><img src="./img/polyline.svg" alt="Linestring" draggable="false"></button>
+        <button id="polygon-mode" class="mode-button active" title="Polygon"><img src="./img/polygon.png" alt="Polygon" draggable="false"></button>
+        <button id="rectangle-mode" class="mode-button" title="Rectangle"><img src="./img/rectangle.svg" alt="Rectangle" draggable="false"></button>
+        <button id="circle-mode" class="mode-button" title="Circle"><img src="./img/circle.svg" alt="Circle" draggable="false"></button>
+        <button id="freehand-mode" class="mode-button" title="Freehand"><img src="./img/freehand.svg" alt="Freehand" draggable="false"></button>
+        <button id="select-mode" class="mode-button" title="Select"><img src="./img/select.svg" alt="Select" draggable="false"></button>
+        <button id="resize-button" class="mode-button" title="Resize"><img src="./img/resize.svg" alt="Resize" draggable="false"></button>
+        <button id="clear-mode" class="mode-button" title="Clear"><img src="./img/delete.svg" alt="Clear" draggable="false"></button>
+        <button id="delete-selected-button" class="mode-button" title="Clear last or Selected"><img src="./img/delete-selected.svg" alt="Delete Selected" draggable="false"></button>
+        <button id="undo-button" class="mode-button" title="Undo"><img src="./img/undo.svg" alt="Undo" draggable="false"></button>
+        <button id="redo-button" class="mode-button" title="Redo"><img src="./img/redo.svg" alt="Redo" draggable="false"></button>
+        <button id="export-button" class="mode-button" title="Export"><img src="./img/download.svg" alt="Export" draggable="false"></button>
+        <button id="upload-button" class="mode-button" title="Upload"><img src="./img/upload.svg" alt="Upload" draggable="false"></button>
+        <input type="file" id="upload-input" style="display: none;" accept=".geojson,.json">
+    </div>
+
+    <script type="module" src="./index.ts"></script>
+    <!-- Google Maps API is loaded by the Loader in index.ts -->
+</body>
+</html>