Comment on page
Map Location Details Drawer
Use this drawer to display additional details for a product or service on a map
This map location details drawer is ideal for apps where you have a map with location pins and want to allow users to click on a pin to view more details.
This block will be pasted into your app as FloatingGroup Map Location Details Drawer that is right-justified and fits 100% to the current page's height. It will include the following:
- Group Inner title
- This group includes a title, description, star rating (Group star rating_number of type number), average rating, and reviews count.
- Clicking on Group Inner close will close the floating group.
- Group Main image
- This is an image placeholder with a label UI to view more photos.
- Group Inner tabs
- Manage your drawer tabs here.
- Group Overview tab
- This group includes a description, icon text labels, and list of items with a check icon next to it.
- Group Main copy to clipboard allows users to copy an address to their browser clipboards.
- Link to website will open a link a new tab.
- Repeatingroup Schedule includes a placeholder UI for hours of operations for the week. By default, the repeating group uses Bubble's
Arbitrary textexpression for demo purpose. - Repeatingroup Amentities includes a placeholder UI for icon labels with a check icon. By default, the repeating group uses Bubble's
Arbitrary textexpression for demo purpose.
- Group Prices / Services tab
- Repeatingroup Services includes a placeholder UI for an item/service, its price, and description. By default, the repeating group uses Bubble's
Arbitrary textexpression for demo purpose.
- Group Reviews with rating summary tab
- This group shows a summary of all existing ratings and number of reviews. For more details on the structure of this tab, please read our Reviews with Ratings Summary and Images documentation which has a similar setup.
- On the current page, add a workflow to show the FloatingGroup Map Location Details Drawer. For example, you might want to click a location pin in a map to show the drawer.
- You may also want to set the FloatingGroup Map Location Details Drawer 's type of content to an existing data type in your app (for example, a 'Place' data type) or to reference data from an external API like Google Places.
- Update any hardcoded values in the drawer to reference dynamic data values.
- Update the repeating groups' data sources to reference your app's own data types. To learn more on how to change the data source, read our documentation on Arbitrary text here.
- Hide and collapse any elements or groups you do not need.
- Update elements and the repeating group in Group Reviews with rating summary tab based on instructions here.
Last modified 15d ago