Map Location Details Drawer

Use this drawer to display additional details for a product or service on a map

Overview

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.

Structure

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 text expression 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 text expression 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 text expression 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.

How to set up

• 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.