# Map Search Page with Toggle and Filters

## Overview

![](https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/4wEk0q2cwC625tSVDdW9/38.png)

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://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/B5BK9u3NjlSCsT4yUzjF/39.png)

* **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://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/HcgEnYtm7Qm115GpNPz8/40.png)

![Selected map marker view](https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/hZtdmVQUkVoDQCwLusmJ/41.png)

* ***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://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/jA6x2aXoWNyRrgoLi0rU/42.png)

* **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://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/8jRUOeaXmzOnO6hot9KT/43.png)

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 %}