feat: add Store Locator component

PiperOrigin-RevId: 581349871

README.md

@@ -121,6 +121,7 @@ Map and marker components can be used with the Extended Component Library, or on
 | [`<gmpx-place-picker>`](src/place_picker/README.md)          | The place picker component is a text input that allows end users to search Google Maps’ global database for a specific address or place using autocomplete.                                                                           |
 | [`<gmpx-route-overview>`](src/route_overview/README.md)      | The route overview component renders a route on a `<gmp-map>` component, including origin and destination markers, an outlined polyline, and viewport management.                                                                     |
 | [`<gmpx-split-layout>`](src/split_layout/README.md)          | The split layout component allows you to display custom HTML information in a responsive panel view alongside main content. In a narrow container, such as a mobile viewport, the panel will be shown below the main content.         |
+| [`<gmpx-store-locator>`](src/store_locator/README.md)        | The store locator component displays an experience where your website's users can browse a list of locations, find the nearest one, and view details.                                                                                 |
 | [Address Validation](src/address_validation/README.md)       | Components for integrating the Address Validation API with your web app.                                                                                                                                                              |
 | [Place building blocks](src/place_building_blocks/README.md) | The place data provider component, along with individual place details components, lets you choose how to display Google Maps place information like opening hours, star reviews, and photos in a new, custom view.                   |
 | [Route building blocks](src/route_building_blocks/README.md) | The route data provider component, along with the route marker and polyline components, lets you choose how to display a route on a map using custom markers and polyline styles.                                                     |

build/make_docs.js

@@ -64,6 +64,7 @@ const FRIENDLY_NAMES = {
   'PlaceRating': 'Rating',
   'PlaceReviews': 'Reviews',
   'suggestValidationAction': 'Suggest action from API response',
+  'StoreLocator': 'Store Locator',
 };
 
 /**
@@ -541,7 +542,7 @@ ${declaration.tagName} {
 \`\`\``);
     } else {
       md += newParagraph(
-          `You can use most built-in CSS properties to control the positioning or display of this component, similar to a \`<span>\` element. The component also supports the following styling inputs for more customization:`);
+          `You can use most built-in CSS properties to control the positioning or display of this component, similar to a \`<span>\` or \`<div>\` element. The component also supports the following styling inputs for more customization:`);
 
       if (declaration.cssProperties) {
         md += newParagraph(header(headerLevel + 2, 'CSS Custom Properties'));

package.json

@@ -56,6 +56,7 @@
     "./route_building_blocks/route_polyline.js": "./lib/route_building_blocks/route_polyline/route_polyline.js",
     "./route_overview.js": "./lib/route_overview/route_overview.js",
     "./split_layout.js": "./lib/split_layout/split_layout.js",
+    "./store_locator.js": "./lib/store_locator/store_locator.js",
     "./react": "./lib/react/index.js",
     "./utils/localize.js": "./lib/utils/localize.js"
   },

src/cdn_index.ts

@@ -26,4 +26,5 @@ export {RouteMarker} from './route_building_blocks/route_marker/route_marker.js'
 export {RoutePolyline} from './route_building_blocks/route_polyline/route_polyline.js';
 export {RouteOverview} from './route_overview/route_overview.js';
 export {SplitLayout} from './split_layout/split_layout.js';
+export {StoreLocator} from './store_locator/store_locator.js';
 export {setStringLiterals} from './utils/localize.js';

src/icon_button/README.md

@@ -48,7 +48,7 @@ import { IconButton } from '@googlemaps/extended-component-library/icon_button.j
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties
 

src/place_building_blocks/place_directions_button/README.md

@@ -42,7 +42,7 @@ import { PlaceDirectionsButton } from '@googlemaps/extended-component-library/pl
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties
 

src/place_building_blocks/place_opening_hours/README.md

@@ -39,7 +39,7 @@ import { PlaceOpeningHours } from '@googlemaps/extended-component-library/place_
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties
 

src/place_building_blocks/place_photo_gallery/README.md

@@ -33,7 +33,7 @@ import { PlacePhotoGallery } from '@googlemaps/extended-component-library/place_
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties
 

src/place_building_blocks/place_rating/README.md

@@ -33,7 +33,7 @@ import { PlaceRating } from '@googlemaps/extended-component-library/place_buildi
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties
 

src/place_building_blocks/place_reviews/README.md

@@ -36,7 +36,7 @@ import { PlaceReviews } from '@googlemaps/extended-component-library/place_build
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties
 

src/place_overview/README.md

@@ -69,7 +69,7 @@ This component uses [named slots](https://developer.mozilla.org/en-US/docs/Web/A
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties
 

src/place_picker/README.md

@@ -59,7 +59,7 @@ biased towards the map’s viewport.
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties
 

src/react/index.ts

@@ -195,3 +195,11 @@ export const SplitLayout = createComponent({
   elementClass: SplitLayoutWC,
   react: React,
 });
+
+import {StoreLocator as StoreLocatorWC} from '../store_locator/store_locator.js';
+
+export const StoreLocator = createComponent({
+  tagName: 'gmpx-store-locator',
+  elementClass: StoreLocatorWC,
+  react: React,
+});

src/split_layout/README.md

@@ -47,7 +47,7 @@ This component uses [named slots](https://developer.mozilla.org/en-US/docs/Web/A
 
 ## Styling
 
-You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` or `<div>` element. The component also supports the following styling inputs for more customization:
 
 ### CSS Custom Properties