Canvas Manual
5.1
Search
K
Comment on page

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.