Extended Component Library » Place Building Blocks
Renders a list of user-generated place reviews.
Reviews are displayed in an order corresponding to the default behavior of the Place API.
This component is designed to work with a Place Data Provider; please see Place Building Blocks for more information.
When loading the library with a <script> tag (referencing the CDN bundle), please refer to the instructions in the root-level Readme. You do not need to take additional steps to use this component.
When bundling your dependencies and you want to include <gmpx-place-reviews> on a page:
import '@googlemaps/extended-component-library/place_building_blocks/place_reviews.js';
When bundling your dependencies and you need to access the class PlaceReviews directly (less common):
import { PlaceReviews } from '@googlemaps/extended-component-library/place_building_blocks/place_reviews.js';
| Attribute | Property | Property type | Description | Default | Reflects? |
|---|---|---|---|---|---|
max-reviews |
maxReviews |
number | undefined |
The maximum number of reviews to display. If undefined, displays all reviews returned by the Places API, which provides at most 5. | ✅ | |
place |
Place|PlaceResult|null|undefined |
Place data to render, overriding anything provided by context. | ❌ | ||
no-data |
noData |
boolean |
This read-only property and attribute indicate whether the component has the required Place data to display itself. Use the attribute to target CSS rules if you wish to hide this component, or display alternate content, when there's no valid data. |
true |
✅ |
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:
| Name | Default | Description |
|---|---|---|
--gmpx-rating-color |
#ffb300 |
Color of the star rating icons when filled. |
--gmpx-rating-color-empty |
#e0e0e0 |
Color of the star rating icons when empty. |
--gmpx-color-outline |
#e0e0e0 |
Divider color. 🌎 |
🌎 indicates a global style token shared by multiple components. Please see the library Readme for more information.