googlemaps-samples · willum070 · Nov 6, 2025 · Oct 16, 2025 · Oct 28, 2025 · Oct 28, 2025
diff --git a/samples/dds-region-viewer/README.md b/samples/dds-region-viewer/README.md
@@ -0,0 +1,63 @@
+# Google Maps JavaScript Sample
+
+The Region Viewer lets you view all types of boundaries for every supported region.
+It is intended as a utility rather than a direct code demonstration.
+
+## Run the conversion scripts
+
+The Region Viewer relies on Google-provided JSON coverage data files to populate
+its menus. The Coverage data is periodically updated. Authors can generate new
+coverage data from CSV files using the Python scripts located in `/scripts`.
+
+The conversion scripts have specific sorting requirements for the input CSV files:
+
+- `csv_to_html.py` requires the CSV to be sorted by the "Country Code" column. Used
+to generate the HTML table for the documentation page.
+- `csv_to_json.py` requires the CSV to be sorted by the "Country Name En" column.
+Used to generate JSON data for menu logic.
+
+To update coverage data:
+
+1. Update the CSV files with ones containing the latest data.
+2. From the `samples/dds-region-viewer/` folder, run the following commands:
+
+    ```bash
+    python3 scripts/csv_to_html.py
+    python3 scripts/csv_to_json.py
+    ```
+
+## Setup
+
+### Before starting run:
+
+`npm i`
+
+### Run an example on a local web server
+
+`cd samples/dds-region-viewer`
+`npm start`
+
+### Build an individual example
+
+`cd samples/dds-region-viewer`
+`npm run build`
+
+From 'samples':
+
+`npm run build --workspace=dds-region-viewer/`
+
+### Build all of the examples.
+
+From 'samples':
+
+`npm run build-all`
+
+### Run lint to check for problems
+
+`cd samples/dds-region-viewer`
+`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/dds-region-viewer/index.html b/samples/dds-region-viewer/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_dds_region_viewer] -->
+<html>
+  <head>
+    <title>Region Coverage Viewer</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+    <!-- prettier-ignore -->
+    <script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
+      ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
+  </head>
+  <body>
+    <gmp-map
+      center="39.32,-95"
+      zoom="2"
+      map-type-control="false"
+      street-view-control="false"
+      map-id="1bf5295b744a394a"
+    >
+      <div id="container" slot="control-inline-start-block-start">
+        <div id="sidebar">
+          <div id="title">Region Coverage Viewer</div>
+          <div id="country-menu-div">
+            <!-- Country selection dropdown -->
+            <select id="country-select" class="pac-controls"></select>
+          </div>
+          <div id="feature-menu-div">
+            <!-- Feature type dropdown -->
+            <select id="feature-type-select" class="pac-controls">
+              <option id="country" value="country">Country</option>
+              <option
+                id="administrative_area_level_1"
+                value="administrative_area_level_1"
+                selected
+              >
+                Administrative Area Level 1
+              </option>
+              <option
+                id="administrative_area_level_2"
+                value="administrative_area_level_2"
+              >
+                Administrative Area Level 2
+              </option>
+              <option id="locality" value="locality">Locality</option>
+              <option id="postal_code" value="postal_code">Postal code</option>
+              <option id="school_district" value="school_district">
+                School district
+              </option>
+            </select>
+          </div>
+          <!-- Autocomplete control -->
+          <gmp-place-autocomplete class="pac-controls"></gmp-place-autocomplete>
+          <div id="filter-checkbox">
+            <label for="pac-filter-option"
+              ><input id="pac-filter-option" type="checkbox" /> Restrict search
+              to selected feature type</label
+            >
+          </div>
+          <!-- Color controls -->
+          <div id="color-controls" class="pac-controls">
+            <label for="head"
+              >Fill:&nbsp;<input
+                type="color"
+                id="fill-color-picker"
+                name="head"
+                value="#810FCB"
+            /></label>
+            &nbsp;&nbsp;
+            <label for="body"
+              >Stroke:&nbsp;<input
+                type="color"
+                id="stroke-color-picker"
+                name="body"
+                value="#810FCB"
+            /></label>
+          </div>
+          <!-- Place details, photo, etc. -->
+          <div id="pac-content"></div>
+        </div>
+      </div>
+    </gmp-map>
+  </body>
+</html>
+<!-- [END maps_dds_region_viewer] -->