diff --git a/dist/samples/dds-region-viewer/app/index.html b/dist/samples/dds-region-viewer/app/index.html
index 2ae8b471a5..d5acfefc28 100644
--- a/dist/samples/dds-region-viewer/app/index.html
+++ b/dist/samples/dds-region-viewer/app/index.html
@@ -43,6 +43,7 @@
             </option>
           </select>
         </div>
+        <!-- Autocomplete control -->
         <div id="ac-input">
           <input
             id="pac-input"
@@ -51,22 +52,29 @@
             placeholder="Enter a location name"
           />
         </div>
+        <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:</label>
-          <input
-            type="color"
-            id="fill-color-picker"
-            name="head"
-            value="#810FCB"
-          />
-          <label for="body">Stroke:</label>
-          <input
-            type="color"
-            id="stroke-color-picker"
-            name="body"
-            value="#810FCB"
-          />
+          <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>
diff --git a/dist/samples/dds-region-viewer/app/index.ts b/dist/samples/dds-region-viewer/app/index.ts
index 201dc47f08..b86cc0d576 100644
--- a/dist/samples/dds-region-viewer/app/index.ts
+++ b/dist/samples/dds-region-viewer/app/index.ts
@@ -14,6 +14,7 @@ let map: google.maps.Map;
 let countryMenu: HTMLSelectElement;
 let featureMenu: HTMLSelectElement;
 let searchInput: HTMLInputElement;
+let searchInputOption: HTMLInputElement;
 let fillColorPicker: HTMLInputElement;
 let strokeColorPicker: HTMLInputElement;
 let contentDiv: HTMLElement;
@@ -44,6 +45,7 @@ function initMap() {
     const card = document.getElementById('pac-card') as HTMLElement;
     contentDiv = document.getElementById('pac-content') as HTMLElement;
     searchInput = document.getElementById('pac-input') as HTMLInputElement;
+    searchInputOption = document.getElementById('pac-filter-option') as HTMLInputElement;
     countryMenu = document.getElementById('country-select') as HTMLSelectElement;
     featureMenu = document.getElementById('feature-type-select') as HTMLSelectElement;
     fillColorPicker = document.getElementById('fill-color-picker') as HTMLInputElement;
@@ -69,6 +71,18 @@ function initMap() {
     autoComplete = new google.maps.places.Autocomplete(searchInput, autocompleteOptions);
     placesService = new google.maps.places.PlacesService(map);
 
+    searchInputOption.addEventListener('change', () => {
+        if (searchInputOption.checked) {
+            // Do not show school_district since AC cannot use it for filtering.
+            featureMenu.item(5)!.disabled = true;
+            setFeatureType();
+        } else {
+            // Show school districts.
+            featureMenu.item(5)!.disabled = false;
+            setFeatureType();
+        }
+    });
+
     autoComplete.addListener('place_changed', () => {
         const place = autoComplete.getPlace() as google.maps.places.PlaceResult;
         const types = place.types as string[];
@@ -97,10 +111,11 @@ function initMap() {
                 break;
         }
 
-        showSelectedPolygon(place.place_id);
+        showSelectedPolygon(place.place_id, 1);
 
     });
 
+
     // Add all the feature layers.
     //@ts-ignore
     countryLayer = map.getFeatureLayer('COUNTRY');
@@ -132,7 +147,7 @@ function initMap() {
     // Set up country and feature menus.
     buildMenu();
     onCountrySelected();
-    featureMenu.selectedIndex = 1;
+    featureMenu.selectedIndex = 0; // Set to COUNTRY.
 }
 
 // Restyle and make a request when the feature type is changed.
@@ -147,6 +162,7 @@ function featureTypeChanged() {
     });
 
     revertStyles();
+    setFeatureType();
     selectedPlaceId = '';
     contentDiv.innerHTML = '';
 
@@ -154,27 +170,44 @@ function featureTypeChanged() {
     switch (featureMenu.value) {
         case 'country':
             countryLayer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'administrative_area_level_1':
             admin1Layer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'administrative_area_level_2':
             admin2Layer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'locality':
             localityLayer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'postal_code':
             postalCodeLayer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'school_district':
             schoolDistrictLayer.style = styleStrokeOnly;
+            searchInputOption.disabled = true;
             break;
         default:
             break;
     }
 }
 
+// Toggle autocomplete types based on restrict search checkbox.
+function setFeatureType() {
+    if (searchInputOption.checked) {
+        // Set autocomplete to the selected type.
+        autoComplete.setTypes([featureMenu.value]);
+    } else {
+        // Set autocomplete to return all feature types.
+        autoComplete.setTypes(['(regions)']);
+    }
+}
+
 // Restyle when the stroke or fill is changed.
 function styleChanged() {
     if (selectedPlaceId) {
@@ -215,21 +248,27 @@ function applyStyle(placeid?) {
     switch (featureMenu.value) {
         case 'country':
             countryLayer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'administrative_area_level_1':
             admin1Layer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'administrative_area_level_2':
             admin2Layer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'locality':
             localityLayer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'postal_code':
             postalCodeLayer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'school_district':
             schoolDistrictLayer.style = featureStyle;
+            searchInputOption.disabled = true;
             break;
         default:
             break;
@@ -254,10 +293,28 @@ function buildMenu() {
 function onCountrySelected() {
     // Get the selected value.
     let selected = countryMenu.value;
+    let featureAvailabilityMap = getFeatureAvailability(selected);
+
+    // Set the feature list selection to 'country'.
+    featureMenu.namedItem('country')!.selected = true;
+
+    // Do a comparison on the map, and disable any false items.
+    for (const item of featureAvailabilityMap) {
+        if (item[1] == false) {
+            featureMenu.namedItem(item[0])!.disabled = true;
+        } else {
+            featureMenu.namedItem(item[0])!.disabled = false;
+        }
+    }
 
+    showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+}
+
+// Return a map of feature availability for a country.
+function getFeatureAvailability(countryName) {
     // Return the data for the selected country.
     const selectedCountry = countries.find((country) => {
-        return country.code === selected;
+        return country.code === countryName;
     });
 
     // Create a map for our values.
@@ -270,19 +327,7 @@ function onCountrySelected() {
         ['school_district', selectedCountry?.feature.school_district],
     ]);
 
-    // Set the feature list selection to 'country'.
-    featureMenu.namedItem('country')!.selected = true;
-
-    // Do a comparison on the map, and disable any false items.
-    for (const item of featureAvailabilityMap) {
-        if (item[1] == false) {
-            featureMenu.namedItem(item[0])!.disabled = true;
-        } else {
-            featureMenu.namedItem(item[0])!.disabled = false;
-        }
-    }
-
-    showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+    return featureAvailabilityMap;
 }
 
 // Restyle all feature layers to be invisible.
@@ -296,7 +341,7 @@ function revertStyles() {
 function handlePlaceClick(event) {
     let clickedPlaceId = event.features[0].placeId;
     if (!clickedPlaceId) return;
-    showSelectedPolygon(clickedPlaceId);
+    showSelectedPolygon(clickedPlaceId, 0);
 }
 
 // Get the place ID for the selected country, then call showSelectedPolygon().
@@ -314,13 +359,14 @@ function showSelectedCountry(countryName) {
             status === google.maps.places.PlacesServiceStatus.OK &&
             place
         ) {
-            showSelectedPolygon(place[0].place_id);
+            showSelectedPolygon(place[0].place_id, 0);
         }
     });
 }
 
 // Event handler for when a polygon is selected.
-function showSelectedPolygon(placeid) {
+// mode 0 = click, mode 1 = autocomplete.
+function showSelectedPolygon(placeid, mode) {
     selectedPlaceId = placeid;
     contentDiv.innerHTML = ''; // Clear the info display.
 
@@ -352,17 +398,23 @@ function showSelectedPolygon(placeid) {
             const types = place.types as string[];
 
             // Create HTML for place information.
-            contentDiv.innerHTML = '<hr><span id="place-info"><b>' + place.formatted_address +
-                '</b><br/> Place ID: <code>' + placeid + '</code>' +
-                '<br/> Feature type: <code>' + types[0] + '</code></span><br/>';
+            // Show information if boundary was clicked (mode 0).
+            if (mode == 0){
+                contentDiv.innerHTML = `<hr><span id="place-info"><b>${place.formatted_address}
+                    </b><br/> Place ID: <code>${placeid}</code>
+                    <br/> Feature type: <code>${types[0]}</code></span><br/>`;
+            } else {
+                // Display no information if autocomplete was used (mode 1).
+                contentDiv.innerHTML = `<hr><span id="place-info">Click a boundary to see its place ID and feature type.</span>`
+            };
         }
     });
 
     // Call the global styling function.
     applyStyle(placeid);
-
 }
-/** GENERATED FILE, DO NOT EDIT */
+
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
 
 const countries = [
     {
diff --git a/dist/samples/dds-region-viewer/app/style.css b/dist/samples/dds-region-viewer/app/style.css
index ad6ddd97de..9c09c9431c 100644
--- a/dist/samples/dds-region-viewer/app/style.css
+++ b/dist/samples/dds-region-viewer/app/style.css
@@ -70,3 +70,14 @@ body {
   font-size: 14px;
 }
 
+#color-controls {
+  display: flex;
+  align-items: center;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
diff --git a/dist/samples/dds-region-viewer/docs/index.html b/dist/samples/dds-region-viewer/docs/index.html
index 01c5eceb3b..16b208938d 100644
--- a/dist/samples/dds-region-viewer/docs/index.html
+++ b/dist/samples/dds-region-viewer/docs/index.html
@@ -44,6 +44,7 @@
             </option>
           </select>
         </div>
+        <!-- Autocomplete control -->
         <div id="ac-input">
           <input
             id="pac-input"
@@ -52,22 +53,29 @@
             placeholder="Enter a location name"
           />
         </div>
+        <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:</label>
-          <input
-            type="color"
-            id="fill-color-picker"
-            name="head"
-            value="#810FCB"
-          />
-          <label for="body">Stroke:</label>
-          <input
-            type="color"
-            id="stroke-color-picker"
-            name="body"
-            value="#810FCB"
-          />
+          <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>
diff --git a/dist/samples/dds-region-viewer/docs/index.js b/dist/samples/dds-region-viewer/docs/index.js
index da2fdbfa1a..1d21ba1032 100644
--- a/dist/samples/dds-region-viewer/docs/index.js
+++ b/dist/samples/dds-region-viewer/docs/index.js
@@ -13,6 +13,7 @@ let map;
 let countryMenu;
 let featureMenu;
 let searchInput;
+let searchInputOption;
 let fillColorPicker;
 let strokeColorPicker;
 let contentDiv;
@@ -42,6 +43,7 @@ function initMap() {
 
   contentDiv = document.getElementById("pac-content");
   searchInput = document.getElementById("pac-input");
+  searchInputOption = document.getElementById("pac-filter-option");
   countryMenu = document.getElementById("country-select");
   featureMenu = document.getElementById("feature-type-select");
   fillColorPicker = document.getElementById("fill-color-picker");
@@ -69,6 +71,17 @@ function initMap() {
     autocompleteOptions,
   );
   placesService = new google.maps.places.PlacesService(map);
+  searchInputOption.addEventListener("change", () => {
+    if (searchInputOption.checked) {
+      // Do not show school_district since AC cannot use it for filtering.
+      featureMenu.item(5).disabled = true;
+      setFeatureType();
+    } else {
+      // Show school districts.
+      featureMenu.item(5).disabled = false;
+      setFeatureType();
+    }
+  });
   autoComplete.addListener("place_changed", () => {
     const place = autoComplete.getPlace();
     const types = place.types;
@@ -97,7 +110,7 @@ function initMap() {
         break;
     }
 
-    showSelectedPolygon(place.place_id);
+    showSelectedPolygon(place.place_id, 1);
   });
   // Add all the feature layers.
   //@ts-ignore
@@ -133,7 +146,7 @@ function initMap() {
   // Set up country and feature menus.
   buildMenu();
   onCountrySelected();
-  featureMenu.selectedIndex = 1;
+  featureMenu.selectedIndex = 0; // Set to COUNTRY.
 }
 
 // Restyle and make a request when the feature type is changed.
@@ -148,33 +161,51 @@ function featureTypeChanged() {
   });
 
   revertStyles();
+  setFeatureType();
   selectedPlaceId = "";
   contentDiv.innerHTML = "";
   // Apply the style to the selected feature layer.
   switch (featureMenu.value) {
     case "country":
       countryLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_1":
       admin1Layer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_2":
       admin2Layer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "locality":
       localityLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "postal_code":
       postalCodeLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "school_district":
       schoolDistrictLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = true;
       break;
     default:
       break;
   }
 }
 
+// Toggle autocomplete types based on restrict search checkbox.
+function setFeatureType() {
+  if (searchInputOption.checked) {
+    // Set autocomplete to the selected type.
+    autoComplete.setTypes([featureMenu.value]);
+  } else {
+    // Set autocomplete to return all feature types.
+    autoComplete.setTypes(["(regions)"]);
+  }
+}
+
 // Restyle when the stroke or fill is changed.
 function styleChanged() {
   if (selectedPlaceId) {
@@ -214,21 +245,27 @@ function applyStyle(placeid) {
   switch (featureMenu.value) {
     case "country":
       countryLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_1":
       admin1Layer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_2":
       admin2Layer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "locality":
       localityLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "postal_code":
       postalCodeLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "school_district":
       schoolDistrictLayer.style = featureStyle;
+      searchInputOption.disabled = true;
       break;
     default:
       break;
@@ -255,9 +292,28 @@ function buildMenu() {
 function onCountrySelected() {
   // Get the selected value.
   let selected = countryMenu.value;
+  let featureAvailabilityMap = getFeatureAvailability(selected);
+
+  // Set the feature list selection to 'country'.
+  featureMenu.namedItem("country").selected = true;
+
+  // Do a comparison on the map, and disable any false items.
+  for (const item of featureAvailabilityMap) {
+    if (item[1] == false) {
+      featureMenu.namedItem(item[0]).disabled = true;
+    } else {
+      featureMenu.namedItem(item[0]).disabled = false;
+    }
+  }
+
+  showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+}
+
+// Return a map of feature availability for a country.
+function getFeatureAvailability(countryName) {
   // Return the data for the selected country.
   const selectedCountry = countries.find((country) => {
-    return country.code === selected;
+    return country.code === countryName;
   });
   // Create a map for our values.
   let featureAvailabilityMap = new Map([
@@ -274,20 +330,7 @@ function onCountrySelected() {
     ["locality", selectedCountry?.feature.locality],
     ["school_district", selectedCountry?.feature.school_district],
   ]);
-
-  // Set the feature list selection to 'country'.
-  featureMenu.namedItem("country").selected = true;
-
-  // Do a comparison on the map, and disable any false items.
-  for (const item of featureAvailabilityMap) {
-    if (item[1] == false) {
-      featureMenu.namedItem(item[0]).disabled = true;
-    } else {
-      featureMenu.namedItem(item[0]).disabled = false;
-    }
-  }
-
-  showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+  return featureAvailabilityMap;
 }
 
 // Restyle all feature layers to be invisible.
@@ -303,7 +346,7 @@ function handlePlaceClick(event) {
 
   if (!clickedPlaceId) return;
 
-  showSelectedPolygon(clickedPlaceId);
+  showSelectedPolygon(clickedPlaceId, 0);
 }
 
 // Get the place ID for the selected country, then call showSelectedPolygon().
@@ -317,13 +360,14 @@ function showSelectedCountry(countryName) {
 
   placesService.findPlaceFromQuery(request, (place, status) => {
     if (status === google.maps.places.PlacesServiceStatus.OK && place) {
-      showSelectedPolygon(place[0].place_id);
+      showSelectedPolygon(place[0].place_id, 0);
     }
   });
 }
 
 // Event handler for when a polygon is selected.
-function showSelectedPolygon(placeid) {
+// mode 0 = click, mode 1 = autocomplete.
+function showSelectedPolygon(placeid, mode) {
   selectedPlaceId = placeid;
   contentDiv.innerHTML = ""; // Clear the info display.
 
@@ -350,22 +394,22 @@ function showSelectedPolygon(placeid) {
       const types = place.types;
 
       // Create HTML for place information.
-      contentDiv.innerHTML =
-        '<hr><span id="place-info"><b>' +
-        place.formatted_address +
-        "</b><br/> Place ID: <code>" +
-        placeid +
-        "</code>" +
-        "<br/> Feature type: <code>" +
-        types[0] +
-        "</code></span><br/>";
+      // Show information if boundary was clicked (mode 0).
+      if (mode == 0) {
+        contentDiv.innerHTML = `<hr><span id="place-info"><b>${place.formatted_address}
+                    </b><br/> Place ID: <code>${placeid}</code>
+                    <br/> Feature type: <code>${types[0]}</code></span><br/>`;
+      } else {
+        // Display no information if autocomplete was used (mode 1).
+        contentDiv.innerHTML = `<hr><span id="place-info">Click a boundary to see its place ID and feature type.</span>`;
+      }
     }
   });
   // Call the global styling function.
   applyStyle(placeid);
 }
 
-/** GENERATED FILE, DO NOT EDIT */
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
 const countries = [
   {
     name: "Afghanistan",
diff --git a/dist/samples/dds-region-viewer/docs/style.css b/dist/samples/dds-region-viewer/docs/style.css
index d9ff20e412..3f60e68ed0 100644
--- a/dist/samples/dds-region-viewer/docs/style.css
+++ b/dist/samples/dds-region-viewer/docs/style.css
@@ -71,4 +71,15 @@ body {
   font-size: 14px;
 }
 
+#color-controls {
+  display: flex;
+  align-items: center;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
 /* [END maps_dds_region_viewer] */
\ No newline at end of file
diff --git a/dist/samples/dds-region-viewer/iframe/index.html b/dist/samples/dds-region-viewer/iframe/index.html
index 6610c1f10d..eefee37b85 100644
--- a/dist/samples/dds-region-viewer/iframe/index.html
+++ b/dist/samples/dds-region-viewer/iframe/index.html
@@ -8,8 +8,8 @@
   <head>
     <title>Region Coverage Viewer</title>
 
-    <script type="module" crossorigin src="./assets/index-RAC0W1QH.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-MBGwqZ8m.css" />
+    <script type="module" crossorigin src="./assets/index-BDe7Wysv.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CuS3OBWN.css" />
   </head>
   <body>
     <div id="container">
@@ -43,6 +43,7 @@
             </option>
           </select>
         </div>
+        <!-- Autocomplete control -->
         <div id="ac-input">
           <input
             id="pac-input"
@@ -51,22 +52,29 @@
             placeholder="Enter a location name"
           />
         </div>
+        <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:</label>
-          <input
-            type="color"
-            id="fill-color-picker"
-            name="head"
-            value="#810FCB"
-          />
-          <label for="body">Stroke:</label>
-          <input
-            type="color"
-            id="stroke-color-picker"
-            name="body"
-            value="#810FCB"
-          />
+          <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>
diff --git a/dist/samples/dds-region-viewer/jsfiddle/demo.css b/dist/samples/dds-region-viewer/jsfiddle/demo.css
index ad6ddd97de..9c09c9431c 100644
--- a/dist/samples/dds-region-viewer/jsfiddle/demo.css
+++ b/dist/samples/dds-region-viewer/jsfiddle/demo.css
@@ -70,3 +70,14 @@ body {
   font-size: 14px;
 }
 
+#color-controls {
+  display: flex;
+  align-items: center;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
diff --git a/dist/samples/dds-region-viewer/jsfiddle/demo.html b/dist/samples/dds-region-viewer/jsfiddle/demo.html
index 72a931b8fb..70d3f3e123 100644
--- a/dist/samples/dds-region-viewer/jsfiddle/demo.html
+++ b/dist/samples/dds-region-viewer/jsfiddle/demo.html
@@ -42,6 +42,7 @@
             </option>
           </select>
         </div>
+        <!-- Autocomplete control -->
         <div id="ac-input">
           <input
             id="pac-input"
@@ -50,22 +51,29 @@
             placeholder="Enter a location name"
           />
         </div>
+        <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:</label>
-          <input
-            type="color"
-            id="fill-color-picker"
-            name="head"
-            value="#810FCB"
-          />
-          <label for="body">Stroke:</label>
-          <input
-            type="color"
-            id="stroke-color-picker"
-            name="body"
-            value="#810FCB"
-          />
+          <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>
diff --git a/dist/samples/dds-region-viewer/jsfiddle/demo.js b/dist/samples/dds-region-viewer/jsfiddle/demo.js
index 6311d9819e..bef867d6a2 100644
--- a/dist/samples/dds-region-viewer/jsfiddle/demo.js
+++ b/dist/samples/dds-region-viewer/jsfiddle/demo.js
@@ -12,6 +12,7 @@ let map;
 let countryMenu;
 let featureMenu;
 let searchInput;
+let searchInputOption;
 let fillColorPicker;
 let strokeColorPicker;
 let contentDiv;
@@ -41,6 +42,7 @@ function initMap() {
 
   contentDiv = document.getElementById("pac-content");
   searchInput = document.getElementById("pac-input");
+  searchInputOption = document.getElementById("pac-filter-option");
   countryMenu = document.getElementById("country-select");
   featureMenu = document.getElementById("feature-type-select");
   fillColorPicker = document.getElementById("fill-color-picker");
@@ -68,6 +70,17 @@ function initMap() {
     autocompleteOptions,
   );
   placesService = new google.maps.places.PlacesService(map);
+  searchInputOption.addEventListener("change", () => {
+    if (searchInputOption.checked) {
+      // Do not show school_district since AC cannot use it for filtering.
+      featureMenu.item(5).disabled = true;
+      setFeatureType();
+    } else {
+      // Show school districts.
+      featureMenu.item(5).disabled = false;
+      setFeatureType();
+    }
+  });
   autoComplete.addListener("place_changed", () => {
     const place = autoComplete.getPlace();
     const types = place.types;
@@ -96,7 +109,7 @@ function initMap() {
         break;
     }
 
-    showSelectedPolygon(place.place_id);
+    showSelectedPolygon(place.place_id, 1);
   });
   // Add all the feature layers.
   //@ts-ignore
@@ -132,7 +145,7 @@ function initMap() {
   // Set up country and feature menus.
   buildMenu();
   onCountrySelected();
-  featureMenu.selectedIndex = 1;
+  featureMenu.selectedIndex = 0; // Set to COUNTRY.
 }
 
 // Restyle and make a request when the feature type is changed.
@@ -147,33 +160,51 @@ function featureTypeChanged() {
   });
 
   revertStyles();
+  setFeatureType();
   selectedPlaceId = "";
   contentDiv.innerHTML = "";
   // Apply the style to the selected feature layer.
   switch (featureMenu.value) {
     case "country":
       countryLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_1":
       admin1Layer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_2":
       admin2Layer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "locality":
       localityLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "postal_code":
       postalCodeLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "school_district":
       schoolDistrictLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = true;
       break;
     default:
       break;
   }
 }
 
+// Toggle autocomplete types based on restrict search checkbox.
+function setFeatureType() {
+  if (searchInputOption.checked) {
+    // Set autocomplete to the selected type.
+    autoComplete.setTypes([featureMenu.value]);
+  } else {
+    // Set autocomplete to return all feature types.
+    autoComplete.setTypes(["(regions)"]);
+  }
+}
+
 // Restyle when the stroke or fill is changed.
 function styleChanged() {
   if (selectedPlaceId) {
@@ -213,21 +244,27 @@ function applyStyle(placeid) {
   switch (featureMenu.value) {
     case "country":
       countryLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_1":
       admin1Layer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_2":
       admin2Layer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "locality":
       localityLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "postal_code":
       postalCodeLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "school_district":
       schoolDistrictLayer.style = featureStyle;
+      searchInputOption.disabled = true;
       break;
     default:
       break;
@@ -254,9 +291,28 @@ function buildMenu() {
 function onCountrySelected() {
   // Get the selected value.
   let selected = countryMenu.value;
+  let featureAvailabilityMap = getFeatureAvailability(selected);
+
+  // Set the feature list selection to 'country'.
+  featureMenu.namedItem("country").selected = true;
+
+  // Do a comparison on the map, and disable any false items.
+  for (const item of featureAvailabilityMap) {
+    if (item[1] == false) {
+      featureMenu.namedItem(item[0]).disabled = true;
+    } else {
+      featureMenu.namedItem(item[0]).disabled = false;
+    }
+  }
+
+  showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+}
+
+// Return a map of feature availability for a country.
+function getFeatureAvailability(countryName) {
   // Return the data for the selected country.
   const selectedCountry = countries.find((country) => {
-    return country.code === selected;
+    return country.code === countryName;
   });
   // Create a map for our values.
   let featureAvailabilityMap = new Map([
@@ -273,20 +329,7 @@ function onCountrySelected() {
     ["locality", selectedCountry?.feature.locality],
     ["school_district", selectedCountry?.feature.school_district],
   ]);
-
-  // Set the feature list selection to 'country'.
-  featureMenu.namedItem("country").selected = true;
-
-  // Do a comparison on the map, and disable any false items.
-  for (const item of featureAvailabilityMap) {
-    if (item[1] == false) {
-      featureMenu.namedItem(item[0]).disabled = true;
-    } else {
-      featureMenu.namedItem(item[0]).disabled = false;
-    }
-  }
-
-  showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+  return featureAvailabilityMap;
 }
 
 // Restyle all feature layers to be invisible.
@@ -302,7 +345,7 @@ function handlePlaceClick(event) {
 
   if (!clickedPlaceId) return;
 
-  showSelectedPolygon(clickedPlaceId);
+  showSelectedPolygon(clickedPlaceId, 0);
 }
 
 // Get the place ID for the selected country, then call showSelectedPolygon().
@@ -316,13 +359,14 @@ function showSelectedCountry(countryName) {
 
   placesService.findPlaceFromQuery(request, (place, status) => {
     if (status === google.maps.places.PlacesServiceStatus.OK && place) {
-      showSelectedPolygon(place[0].place_id);
+      showSelectedPolygon(place[0].place_id, 0);
     }
   });
 }
 
 // Event handler for when a polygon is selected.
-function showSelectedPolygon(placeid) {
+// mode 0 = click, mode 1 = autocomplete.
+function showSelectedPolygon(placeid, mode) {
   selectedPlaceId = placeid;
   contentDiv.innerHTML = ""; // Clear the info display.
 
@@ -349,22 +393,22 @@ function showSelectedPolygon(placeid) {
       const types = place.types;
 
       // Create HTML for place information.
-      contentDiv.innerHTML =
-        '<hr><span id="place-info"><b>' +
-        place.formatted_address +
-        "</b><br/> Place ID: <code>" +
-        placeid +
-        "</code>" +
-        "<br/> Feature type: <code>" +
-        types[0] +
-        "</code></span><br/>";
+      // Show information if boundary was clicked (mode 0).
+      if (mode == 0) {
+        contentDiv.innerHTML = `<hr><span id="place-info"><b>${place.formatted_address}
+                    </b><br/> Place ID: <code>${placeid}</code>
+                    <br/> Feature type: <code>${types[0]}</code></span><br/>`;
+      } else {
+        // Display no information if autocomplete was used (mode 1).
+        contentDiv.innerHTML = `<hr><span id="place-info">Click a boundary to see its place ID and feature type.</span>`;
+      }
     }
   });
   // Call the global styling function.
   applyStyle(placeid);
 }
 
-/** GENERATED FILE, DO NOT EDIT */
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
 const countries = [
   {
     name: "Afghanistan",
diff --git a/dist/samples/dds-region-viewer/playground/index.html b/dist/samples/dds-region-viewer/playground/index.html
index 5198e3c7e8..3aec6b5d95 100644
--- a/dist/samples/dds-region-viewer/playground/index.html
+++ b/dist/samples/dds-region-viewer/playground/index.html
@@ -45,6 +45,7 @@
             </option>
           </select>
         </div>
+        <!-- Autocomplete control -->
         <div id="ac-input">
           <input
             id="pac-input"
@@ -53,22 +54,29 @@
             placeholder="Enter a location name"
           />
         </div>
+        <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:</label>
-          <input
-            type="color"
-            id="fill-color-picker"
-            name="head"
-            value="#810FCB"
-          />
-          <label for="body">Stroke:</label>
-          <input
-            type="color"
-            id="stroke-color-picker"
-            name="body"
-            value="#810FCB"
-          />
+          <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>
diff --git a/dist/samples/dds-region-viewer/playground/index.ts b/dist/samples/dds-region-viewer/playground/index.ts
index 53a98c68a7..be9ac25c5f 100644
--- a/dist/samples/dds-region-viewer/playground/index.ts
+++ b/dist/samples/dds-region-viewer/playground/index.ts
@@ -14,6 +14,7 @@ let map: google.maps.Map;
 let countryMenu: HTMLSelectElement;
 let featureMenu: HTMLSelectElement;
 let searchInput: HTMLInputElement;
+let searchInputOption: HTMLInputElement;
 let fillColorPicker: HTMLInputElement;
 let strokeColorPicker: HTMLInputElement;
 let contentDiv: HTMLElement;
@@ -44,6 +45,9 @@ function initMap() {
   const card = document.getElementById("pac-card") as HTMLElement;
   contentDiv = document.getElementById("pac-content") as HTMLElement;
   searchInput = document.getElementById("pac-input") as HTMLInputElement;
+  searchInputOption = document.getElementById(
+    "pac-filter-option",
+  ) as HTMLInputElement;
   countryMenu = document.getElementById("country-select") as HTMLSelectElement;
   featureMenu = document.getElementById(
     "feature-type-select",
@@ -78,6 +82,18 @@ function initMap() {
   );
   placesService = new google.maps.places.PlacesService(map);
 
+  searchInputOption.addEventListener("change", () => {
+    if (searchInputOption.checked) {
+      // Do not show school_district since AC cannot use it for filtering.
+      featureMenu.item(5)!.disabled = true;
+      setFeatureType();
+    } else {
+      // Show school districts.
+      featureMenu.item(5)!.disabled = false;
+      setFeatureType();
+    }
+  });
+
   autoComplete.addListener("place_changed", () => {
     const place = autoComplete.getPlace() as google.maps.places.PlaceResult;
     const types = place.types as string[];
@@ -106,7 +122,7 @@ function initMap() {
         break;
     }
 
-    showSelectedPolygon(place.place_id);
+    showSelectedPolygon(place.place_id, 1);
   });
 
   // Add all the feature layers.
@@ -147,7 +163,7 @@ function initMap() {
   // Set up country and feature menus.
   buildMenu();
   onCountrySelected();
-  featureMenu.selectedIndex = 1;
+  featureMenu.selectedIndex = 0; // Set to COUNTRY.
 }
 
 // Restyle and make a request when the feature type is changed.
@@ -162,6 +178,7 @@ function featureTypeChanged() {
   };
 
   revertStyles();
+  setFeatureType();
   selectedPlaceId = "";
   contentDiv.innerHTML = "";
 
@@ -169,27 +186,44 @@ function featureTypeChanged() {
   switch (featureMenu.value) {
     case "country":
       countryLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_1":
       admin1Layer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_2":
       admin2Layer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "locality":
       localityLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "postal_code":
       postalCodeLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = false;
       break;
     case "school_district":
       schoolDistrictLayer.style = styleStrokeOnly;
+      searchInputOption.disabled = true;
       break;
     default:
       break;
   }
 }
 
+// Toggle autocomplete types based on restrict search checkbox.
+function setFeatureType() {
+  if (searchInputOption.checked) {
+    // Set autocomplete to the selected type.
+    autoComplete.setTypes([featureMenu.value]);
+  } else {
+    // Set autocomplete to return all feature types.
+    autoComplete.setTypes(["(regions)"]);
+  }
+}
+
 // Restyle when the stroke or fill is changed.
 function styleChanged() {
   if (selectedPlaceId) {
@@ -230,21 +264,27 @@ function applyStyle(placeid?) {
   switch (featureMenu.value) {
     case "country":
       countryLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_1":
       admin1Layer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "administrative_area_level_2":
       admin2Layer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "locality":
       localityLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "postal_code":
       postalCodeLayer.style = featureStyle;
+      searchInputOption.disabled = false;
       break;
     case "school_district":
       schoolDistrictLayer.style = featureStyle;
+      searchInputOption.disabled = true;
       break;
     default:
       break;
@@ -269,10 +309,28 @@ function buildMenu() {
 function onCountrySelected() {
   // Get the selected value.
   let selected = countryMenu.value;
+  let featureAvailabilityMap = getFeatureAvailability(selected);
 
+  // Set the feature list selection to 'country'.
+  featureMenu.namedItem("country")!.selected = true;
+
+  // Do a comparison on the map, and disable any false items.
+  for (const item of featureAvailabilityMap) {
+    if (item[1] == false) {
+      featureMenu.namedItem(item[0])!.disabled = true;
+    } else {
+      featureMenu.namedItem(item[0])!.disabled = false;
+    }
+  }
+
+  showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+}
+
+// Return a map of feature availability for a country.
+function getFeatureAvailability(countryName) {
   // Return the data for the selected country.
   const selectedCountry = countries.find((country) => {
-    return country.code === selected;
+    return country.code === countryName;
   });
 
   // Create a map for our values.
@@ -291,19 +349,7 @@ function onCountrySelected() {
     ["school_district", selectedCountry?.feature.school_district],
   ]);
 
-  // Set the feature list selection to 'country'.
-  featureMenu.namedItem("country")!.selected = true;
-
-  // Do a comparison on the map, and disable any false items.
-  for (const item of featureAvailabilityMap) {
-    if (item[1] == false) {
-      featureMenu.namedItem(item[0])!.disabled = true;
-    } else {
-      featureMenu.namedItem(item[0])!.disabled = false;
-    }
-  }
-
-  showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+  return featureAvailabilityMap;
 }
 
 // Restyle all feature layers to be invisible.
@@ -317,7 +363,7 @@ function revertStyles() {
 function handlePlaceClick(event) {
   let clickedPlaceId = event.features[0].placeId;
   if (!clickedPlaceId) return;
-  showSelectedPolygon(clickedPlaceId);
+  showSelectedPolygon(clickedPlaceId, 0);
 }
 
 // Get the place ID for the selected country, then call showSelectedPolygon().
@@ -330,13 +376,14 @@ function showSelectedCountry(countryName) {
 
   placesService.findPlaceFromQuery(request, (place, status) => {
     if (status === google.maps.places.PlacesServiceStatus.OK && place) {
-      showSelectedPolygon(place[0].place_id);
+      showSelectedPolygon(place[0].place_id, 0);
     }
   });
 }
 
 // Event handler for when a polygon is selected.
-function showSelectedPolygon(placeid) {
+// mode 0 = click, mode 1 = autocomplete.
+function showSelectedPolygon(placeid, mode) {
   selectedPlaceId = placeid;
   contentDiv.innerHTML = ""; // Clear the info display.
 
@@ -363,22 +410,23 @@ function showSelectedPolygon(placeid) {
       const types = place.types as string[];
 
       // Create HTML for place information.
-      contentDiv.innerHTML =
-        '<hr><span id="place-info"><b>' +
-        place.formatted_address +
-        "</b><br/> Place ID: <code>" +
-        placeid +
-        "</code>" +
-        "<br/> Feature type: <code>" +
-        types[0] +
-        "</code></span><br/>";
+      // Show information if boundary was clicked (mode 0).
+      if (mode == 0) {
+        contentDiv.innerHTML = `<hr><span id="place-info"><b>${place.formatted_address}
+                    </b><br/> Place ID: <code>${placeid}</code>
+                    <br/> Feature type: <code>${types[0]}</code></span><br/>`;
+      } else {
+        // Display no information if autocomplete was used (mode 1).
+        contentDiv.innerHTML = `<hr><span id="place-info">Click a boundary to see its place ID and feature type.</span>`;
+      }
     }
   });
 
   // Call the global styling function.
   applyStyle(placeid);
 }
-/** GENERATED FILE, DO NOT EDIT */
+
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
 
 const countries = [
   {
diff --git a/dist/samples/dds-region-viewer/playground/style.css b/dist/samples/dds-region-viewer/playground/style.css
index 2ac44a6968..2e049e61fd 100644
--- a/dist/samples/dds-region-viewer/playground/style.css
+++ b/dist/samples/dds-region-viewer/playground/style.css
@@ -65,3 +65,14 @@ body {
   font-size: 14px;
 }
 
+#color-controls {
+  display: flex;
+  align-items: center;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+