# Map Search Page with Toggle and Filters

## Overview

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MVsMJYmTJ5rFt8Ny4gE%2F-MVsMYCQMzUyfcwJ3QBP%2Fimage.png?alt=media\&token=2845a992-42de-4371-81df-00207aa6407e)

This page template includes a map component, a search bar with filters, and a toggle to switch between a map or a list view. Clicking on a map marker will open a modal with additional information.

## Structure

When this page is added to your app, it will come with four main groups:

* **FloatingGroup Header** \
  This floating group contains the header reusable element and **Group Main search bar and filters**.
  * Clicking on **Group Inner clear search** will reset the search bar and clear the entered address
  * Clicking on **filters\_template** will open a filter focus group
  * Clicking on **Group Inner map tab\_text** or **Group Inner list tab\_text** will set **var - view map or list tab's** data source to that group's text. This will change the current tab that the user is viewing.

![Search bar, filters, and toggles](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-M1eBVxakiUsshpzauRo%2F-M1eIpypt3zDLaCr7MVh%2FScreen%20Shot%202020-03-05%20at%202.46.19%20AM.png?alt=media\&token=df554943-4c51-442e-8c2f-e56702e9dda1)

* **Group Main map tab**\
  This group contains the map element. It is only visible to the user when the toggle is set to the map view.
  * Clicking on a map marker will open **Group Main map marker content\_address** where you can view more details about the selected location.

![Map tab](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-M1eBVxakiUsshpzauRo%2F-M1eJ9ThF9bIJxmhCAcj%2FScreen%20Shot%202020-03-05%20at%202.49.20%20AM.png?alt=media\&token=e8b2c306-3850-4934-a5ff-ac2b36d1de40)

![Selected map marker view](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MGFFN_E6X16f98dznTX%2F-MGFpLc3aDbeBeze3_BG%2FScreen%20Shot%202020-09-02%20at%202.58.05%20PM.png?alt=media\&token=6ccf28fb-87ba-4b8e-907a-23f19c774864)

* ***Blocks container 860 (do not rename)***\
  This group contains the responsive settings for all additional modules you would add to the page. It is only visible when the toggle is set to the list view.

![Group where your additional modules will be added to](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-M1eBVxakiUsshpzauRo%2F-M1eJKUWjWQ_K1TL_cE5%2FScreen%20Shot%202020-03-05%20at%202.50.10%20AM.png?alt=media\&token=5448386e-d9c4-4f7c-be15-a7f4b9415d4f)

* **FloatingGroup Main bottom menu**\
  This floating group floats to the bottom of the page. It contains the **Group Main map marker content\_address** and the [**mobilemenu**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/pages/mobile-menu-page). 

![Bottom floating group content](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-M1eBVxakiUsshpzauRo%2F-M1eJZikkw3ncBmACZTU%2FScreen%20Shot%202020-03-05%20at%202.51.08%20AM.png?alt=media\&token=c858865c-9a7e-435b-b775-33297f228319)

This page will also come with one popup:

* **Popup Hidden Variables**\
  This popup includes various variables that are referenced in workflows or conditionals on the page.

  * **var - Website object** - This group stores the `website object` (e.g., app name, primary color, and etc.)
  * **var - blank address** - This group has a data source of type `geographic address`. It is used to reset the search bar and remove the entered address in the search input.
  * **var - map or list tab** - This group has a data source of type `text`. It is used to toggle between the map or list view and change which tab the user is currently viewing.

  For more information on how to use hidden variables, click [here](https://docs.airdev.co/canvas/canvas-functionality/data-and-workflows#using-the-hidden-variables-popup).

## How to set up

* Add or remove any filters in [**filters\_template reusable element**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters) as needed. Please resize **Group PLACEHOLDER** so that it is not overlapping with any other elements.<br>
* Update the content of any additional blocks you've added to the list tab (**Blocks container 860 (do not rename)**). Please resize **Group PLACEHOLDER** so that it is not overlapping with any other elements.<br>
* Set the data source of **Map** and update the content in **Group Main map marker content\_address**.<br>
* Update the icons and texts in the [**mobilemenu reusable element**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/pages/mobile-menu-page) as needed.

{% hint style="info" %}
Please ensure the bottom of **FloatingGroup Main bottom menu** is always aligned with the bottom of the page (for responsiveness).
{% endhint %}