js-api-samples/samples/map-drawing-terradraw/index.html at 71bb35a17202cf4e5d976b649c97ac588519db29 · googlemaps-samples/js-api-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<!--
 @license
 Copyright 2025 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<!--[START maps_map_drawing_terradraw]-->
<html>
<head>
    <title>Terra Draw with Google Maps API Sample</title>
    <!-- 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=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/point.svg&quot; alt="Point" draggable="false"></button>
        <button id="linestring-mode" class="mode-button" title="Linestring"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/polyline.svg&quot; alt="Linestring" draggable="false"></button>
        <button id="polygon-mode" class="mode-button active" title="Polygon"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/polygon.png&quot; alt="Polygon" draggable="false"></button>
        <button id="rectangle-mode" class="mode-button" title="Rectangle"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/rectangle.svg&quot; alt="Rectangle" draggable="false"></button>
        <button id="circle-mode" class="mode-button" title="Circle"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/circle.svg&quot; alt="Circle" draggable="false"></button>
        <button id="freehand-mode" class="mode-button" title="Freehand"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/freehand.svg&quot; alt="Freehand" draggable="false"></button>
        <button id="select-mode" class="mode-button" title="Select"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/select.svg&quot; alt="Select" draggable="false"></button>
        <button id="resize-button" class="mode-button" title="Resize"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/resize.svg&quot; alt="Resize" draggable="false"></button>
        <button id="clear-mode" class="mode-button" title="Clear"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/delete.svg&quot; alt="Clear" draggable="false"></button>
        <button id="delete-selected-button" class="mode-button" title="Clear last or Selected"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/delete-selected.svg&quot; alt="Delete Selected" draggable="false"></button>
        <button id="undo-button" class="mode-button" title="Undo"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/undo.svg&quot; alt="Undo" draggable="false"></button>
        <button id="redo-button" class="mode-button" title="Redo"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/redo.svg&quot; alt="Redo" draggable="false"></button>
        <button id="export-button" class="mode-button" title="Export"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/download.svg&quot; alt="Export" draggable="false"></button>
        <button id="upload-button" class="mode-button" title="Upload"><img src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./img/upload.svg&quot; alt="Upload" draggable="false"></button>
        <input type="file" id="upload-input" style="display: none;" accept=".geojson,.json">
    </div>

    <script type="module" src=/proxy/https/github.com/googlemaps-samples/js-api-samples/blob/71bb35a17202cf4e5d976b649c97ac588519db29/samples/map-drawing-terradraw/&quot;./index.ts&quot;&gt;&lt;/script&gt;%3C/div>
    <!-- Google Maps API is loaded by the Loader in index.ts -->
</body>
</html>
<!--[END maps_map_drawing_terradraw]-->