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.

Last updated