# Map Location Details Drawer

## 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](https://docs.airdev.co/canvas/5.3/canvas-library/blocks/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](https://docs.airdev.co/canvas/5.3/canvas-library/updating-asset-rg-data-source).
* 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](https://docs.airdev.co/canvas/5.3/canvas-library/blocks/reviews-with-ratings-summary-and-images).