# Map Search Page with Toggle and Filters

## Overview

![](https://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2FTN2z4t0pa2Q4Q44eIzeX%2F38.png?alt=media\&token=8f8fad4a-2f56-4674-bfa9-47188ebd88d3)

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://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2FPesAQDIGSm5YcwJ7Q016%2F39.png?alt=media\&token=b80ca2fe-0c62-4457-aed5-73c57258e538)

* **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://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2FiZJcq27i3Bzbxs249ttc%2F40.png?alt=media\&token=bff2715a-dfbf-4160-b8f0-62fe59edc564)

![Selected map marker view](https://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2F4UpAkM2D2brDNnDTxmMu%2F41.png?alt=media\&token=f917a945-a8a1-4e21-a7f4-9e6ac9df4ac0)

* ***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://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2F3bQ4BJASEXjPBRCcshUu%2F42.png?alt=media\&token=3b31cef2-3d8a-4317-a77c-50d8cc850773)

* **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://1633175017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSxXQuy9qhgrmawSEYdMH%2Fuploads%2FxGhSgDKexnrjsOyh7sDq%2F43.png?alt=media\&token=b31252e5-30bb-4ad5-8e4d-9fd6c4a15dc3)

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