---
title: "Map V2 Component"
slug: "map-v2-component"
description: "Create interactive maps with the Map V2 component, utilizing Google Maps API for address search, satellite view, and geocoding features."
updated: 2026-02-03T15:44:40Z
published: 2026-02-03T15:48:58Z
canonical: "docs.unqork.io/map-v2-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Map V2 Component

UDesignerClassic Designer

The **Map V2** component is a [Charts & Graphs](/v1/docs/charts-graphs) component for displaying a visual map in Express View. Creators can use a Data Reference Key containing an address string to move the map view to the address location and pin it. You can also enable other map features, like Satellite View and Street View.

> [!WARNING]
> A **Google Map** API key is required when using this component. Visit the Google Maps Platform website to obtain a key: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key).

The Map V2 component uses a Google Maps API key to access Google's Maps JavaScript API and Geocoding APIs. Each API serves a different function:

- **Maps JavaScript API**: Displays a map that includes imagery and local data from the same source as Google Maps.

> To learn more about the Maps Javascript API, visit the Google APIs Marketplace: [https://console.cloud.google.com/marketplace/product/google/maps-backend.googleapis.com](https://console.cloud.google.com/marketplace/product/google/maps-backend.googleapis.com).

**Geocoding API**: Converts an address to a geographic coordinate. The Maps V2 component uses this API when referencing the address in the **Data Reference Key** field.

> To learn more about the Geocoding API, visit the Google APIs Marketplace: [https://console.cloud.google.com/marketplace/product/google/geocoding-backend.googleapis.com](https://console.cloud.google.com/marketplace/product/google/geocoding-backend.googleapis.com).

You'll find the Map V2 component in the [Charts & Graphs](/v1/docs/charts-graphs) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

### Field Text

[![Map V2 component settings displaying options for the Formatting section.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/mapv2.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display1(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

| **Setting** | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Default State Options

| **Setting** | Description |
| --- | --- |
| **Hide Field** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)** hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(OFF)** displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(OFF)****.** Reveal a hidden component by using a logic component's **Outputs** table with the **Type** set to visible. |

### Formatting

| **Setting** | Description |
| --- | --- |
| **Make Map Draggable** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)** to let end-users adjust the map view when clicking and dragging inside the map view port. |
| **Allow Map Zoom** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**checked**) to let end-users zoom in or out using **⌘** (**Apple Key**) **+ Mousewheel Scroll** or **⊞** (**Windows Key**) **+ Mousewheel Scroll**. |
| **Allow Satellite View** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**checked**) to insert a two-dimensional map and Satellite imagery buttons to the map view in Express View. |
| **Allow Fullscreen View** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**checked**) to display a **Full Screen** button in the top-right corner of the map view in Express View. When end-users click the Full Screen button, the map expands to full-screen view. |
| **Allow Street View** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**checked**) to insert the ![Google Street View](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Google_StreetView_Icon.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**Street View**) icon into the bottom-right corner of the map view in Express View. End-users can click and drag the ![Google Street View](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Google_StreetView_Icon.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**Street View**) icon onto the map, placing it in the ground-level Street View. > Learn more about street view here: [https://www.google.com/streetview/](https://www.google.com/streetview/). |
| **Multiple Values** | Enter a formatted address string for the map to begin on. |
| **Display as Text** | Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None. |
| **Table View** | Displays the value in the table view of the submission data. |

## Data Settings

### Data Storage

[![A static image displaying the Map V2 Data settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_thumb_0_0(14).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data(17).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

| Setting | Description |
| --- | --- |
| **Store in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON**) in Module Settings, only values from fields with Store Data in Database enabled are tracked. |

### Data Source

| Setting | Description |
| --- | --- |
| **Data Reference Key** | Enter the Property ID of the component that contains either a formatted address string or a single value. For example, `"70 Greene St. Jersey City, New Jersey 07302"` or an array of multiple formatted address string values, like `["70 Greene St. Jersey City, New Jersey 07302", "350 5th Ave, New York, NY 10118, USA”]`, or a single latitude and longitude value, like `43.65,-79.38`. If a valid address exists, it moves the map view to the address location and places a pin on it. > [!TIP] > To retrieve an address from an **Address Search** component, use a **Data Workflow** [Get](/v1/docs/get-operator) operator to extract the formatted address. |
| **Google Key** | Enter an API key to access Google's Maps API. *This field is required to use the Map V2 component. Acquire an API key here: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key). > [!WARNING] > The API Key in this field is hard-coded and cannot be dynamically changed. |

## Validation Settings

### User Input

[![A static image displaying the Map V2 Validation settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_thumb_0_0(11).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation(13).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

| **Setting** | Description |
| --- | --- |
| **Required** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)** to make this component required. However, this component does not receive user input, and no validation occurs. |

## Advanced Settings

### Set Execution

[![A static image displaying the Map V2 Advanced settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_400_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(20).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

| Setting | Description |
| --- | --- |
| **Debounce the Calls After** | The number of milliseconds that pass before this component calls the Google Maps API using the **Data Reference Key** value. If your Data Reference Key dynamically updates, increase the value to reduce the call frequency to the Google Maps API. The default value is `600 ms`. |

### Additional Display Options

| Setting | Description |
| --- | --- |
| **The Default Location on Browser Load** | Enter a formatted address string for the map to begin on. |
| **Default Zoom Level** | The map's zoom level is based on the location set in **The Default Location on Browser Load** field. Set a value between `1 (World Map)` and `22 (Street Level)`. The default value is `8`. |
| **Point Zoom Level** | The level of zoom after setting a value between `1 (World Map)` and `22 (Street Level)`. The default for this setting is `15`. |
| **Height of Map** | Set the height of the map viewport in pixels (px). The default value is `400px`. > [!WARNING] > This setting accepts only **pixel (px)** values at this time. |
| **Width of Map** | Set the width of the map viewport in pixels (px) or percentage (%). The default value is `100%`. |

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## Adding a Map V2 Component

For this example, create a module that lets end-users search for map locations by entering an address into an [Address Search](/v1/docs/address-search-component) component. You need a **Google Map API** key to configure this module. Visit the Google Maps Platform website to obtain a key: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key).

### Configure the Address Search Component

First, add an [Address Search](/v1/docs/address-search-component) component, so end-users can enter an address that stores in the Map V2 component.

1. In the Module Builder, drag and drop an **Address Search** component onto the canvas.
2. In the Property ID field, enter `address`.
3. In the Label Text field, enter `Address Search`.
4. Under Formatting, set **Show Street**, **Show City**, **Show State**, and **Show Country** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)****.**
5. Navigate to the **Data** settings.
6. From the **Select API** drop-down, select an available **Google Places API**. If you are in the Unqork Training environment, select **Creator Workshop Google Places API**.

> To learn more about Address Search APIs, view our [Enabling Address Search Using Address Services](/v1/docs/enabling-address-search-using-address-services) article.

[![Address Search component settings showing Creator Workshop Google Places API selected.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddressSearch.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleAddressSearch.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)
7. Navigate to the **Actions** settings.
8. In the Trigger field, enter `dwfFormatAddress`.
9. Click **Save Component**.

### Configure the Data Workflow Component

The [Data Workflow](/v1/docs/data-workflow-component) component retrieves the formatted address from the Address Search component. Then, it sends it to a [Hidden](/v1/docs/hidden-component) component, so the Map V2 component can reference it.

1. Drag and drop a **D****ata Workflow** component onto the canvas, placing it below the `address` **Address Search** component.
2. In the Property ID field, enter `dwfFormatAddress`.
3. In the Label Text field, enter `dwfFormatAddress`.

#### Configure the Input Operator

The [Input](/v1/docs/input-operator) operator brings the data from the `address` **Address Search** component into the Data Workflow.

1. Drag and drop an **Input** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Input |
| **Component** | address |
| **required** | Yes |
| **source** | Default |

#### Configure the Get Operator

The [Get](/v1/docs/get-operator) operator selects the formatted key from the `address` **Address Search** component. The formatted key is an address in a string format.

1. Drag and drop a **Get** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Get |
| **Label** | formatted |
| **Preserve Argument Type** | ☐ (**unchecked**) |
| **Path** | formatted |
3. Connect the output port (right) of the `address` **Input** operator to the input port (left) of the `formatted` **Get** operator.

#### Configure the Output Operator

The [Output](/v1/docs/output-operator) operator sends the data to the `hiddenAddress` **H****idden** component to store it.

1. Drag and drop an **Output** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Output |
| **Component** | hiddenAddress |
| **action** | value |
3. Connect the output port (right) of the `formatted` **Get** operator to the input port (left) of the `hiddenAddress` **Output** operator.
4. Click **Save Component**.

Your completed Data Workflow looks like the following:

[![A static image displaying the dwfFormatAddress component's settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfComplete_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfComplete.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

### Configure the Hidden Component

The [Hidden](/v1/docs/hidden-component) component stores the formatted address retrieved from the Data Workflow component. The Map V2 component uses the Hidden component as its Data Reference Key for placing a pin on the map view.

1. Drag and drop a **H****idden** component onto the canvas, placing it below the `dwfFormatAddress` **D****ata Workflow** component.
2. In the Property ID field, enter `hiddenAddress`.
3. In the Label Text field, enter `hiddenAddress`.
4. Navigate to the **Data** settings.
5. Set **Store Data in Database** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)**.
6. Click **Save Component**.

### Configure the Map V2 Component

Lastly, configure a Map V2 component for end-users to visualize the address they searched.

1. Drag and drop a Map V2 component onto the canvas, placing it below the `hiddenAddress` **H****idden** component.
2. In the Property ID field, enter `mapAddress`.
3. In the Label field, enter `Address`.
4. In the **Data Reference Key** field, enter `hiddenAddress`.
5. In the **Google Key** field, enter your Google Maps API key. You can obtain one here: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key).
6. Click **Save Component**.
7. **Save** your module.

**Preview** your module in Express View. You'll see the following functionality:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Mapv2_Preview.webm?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

The **Map V2** component is a [Charts & Graphs](/v1/docs/charts-graphs) component for displaying a visual map in Express View. Creators can use a Data Reference Key containing an address string to move the map view to the address location and pin it. You can also enable other map features, like Satellite View and Street View.

> [!WARNING]
> A **Google Map** API key is required when using this component. Visit the Google Maps Platform website to obtain a key: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key).

The Map V2 component uses a Google Maps API key to access Google's Maps JavaScript API and Geocoding APIs. Each API serves a different function:

- **Maps JavaScript API**: Displays a map that includes imagery and local data from the same source as Google Maps.

> To learn more about the Maps Javascript API, visit the Google APIs Marketplace: [https://console.cloud.google.com/marketplace/product/google/maps-backend.googleapis.com](https://console.cloud.google.com/marketplace/product/google/maps-backend.googleapis.com).
- **Geocoding API**: Converts an address to a geographic coordinate. The Maps V2 component uses this API when referring to the address in the **Data Reference Key** field.

> To learn more about the Geocoding API, visit the Google APIs Marketplace: [https://console.cloud.google.com/marketplace/product/google/geocoding-backend.googleapis.com](https://console.cloud.google.com/marketplace/product/google/geocoding-backend.googleapis.com).

You'll find the Map V2 component in the [Charts & Graphs](/v1/docs/charts-graphs) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image displaying the Map V2 Display settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map_V2_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map%20V2%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

### Field Text

| Setting | Description |
| --- | --- |
| **Label** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Formatting

| **Setting** | Description |
| --- | --- |
| **Make Map Draggable** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)** so end-users can adjust the map view when clicking and dragging inside the map viewport. |
| **Allow Map Zoom** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**checked**) so end-users can zoom in or out using **⌘** (**Apple Key**) **+ Mousewheel Scroll** or **⊞** (**Windows Key**) **+ Mousewheel Scroll**. |
| **Allow Satellite View** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) (**checked**) to insert a two-dimensional map and Satellite imagery buttons to the map view in Express View. |
| **Allow Fullscreen View** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) (**checked**) to display a **Full Screen** button in the top-right corner of the map view in Express View. When end-users click the Full Screen button, the map expands to full-screen view. |
| **Allow Street View** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) (**checked**) to insert the ![Google Street View](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Google_StreetView_Icon.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**Street View**) icon into the bottom-right corner of the map view in Express View. End-users can click and drag the ![Google Street View](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Google_StreetView_Icon.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)(**Street View**) icon onto the map, placing it in the ground-level Street View. > Learn more about street view here: [https://www.google.com/streetview/](https://www.google.com/streetview/). |

### Default State Options

| **Setting** | Description |
| --- | --- |
| **Multiple Values** | Enter a formatted address string for the map to start on. |
| **Read-Only View** | Prevents the map from accepting a Data Reference Key, and prevents end-users from adjusting the map view. Checking this setting disables the following settings: - Make Map Draggable - Allow Map Zoom - Allow Satellite View - Allow Fullscreen View - Allow Street View |
| **Table View** | Displays the value in the table view of the submission data. |
| **Hide Field** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)** hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(OFF)** displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(OFF)****.** Reveal a hidden component using the OUTPUTS table in a logic component with the **Type** set to visible. |

## Data Panel

[![A static image displaying the Map V2 Data settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map_V2_Component_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map%20V2%20Component%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

### Data Source

| Setting | Description |
| --- | --- |
| **Data Reference Key** | Enter the Property ID of the component that contains either a formatted address string or a single value. For example, `"70 Greene St. Jersey City, New Jersey 07302"` or an array of multiple formatted address string values, like `["70 Greene St. Jersey City, New Jersey 07302", "350 5th Ave, New York, NY 10118, USA”]`, or a single latitude and longitude value, like `43.65,-79.38`. If a valid address exists, it moves the map view to the address location and places a pin on it. > [!TIP] > To retrieve an address from an **Address Search** component, use a **Data Workflow** [Get](/v1/docs/get-operator) operator to extract the formatted address. |
| **Google Key** | Enter an API key to access Google's Maps API. *This field is required to use the Map V2 component. Acquire an API key here: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key). > [!CAUTION] > The API Key in this field is hard-coded and cannot be dynamically changed. |

### Data Storage

| Setting | Description |
| --- | --- |
| **Store in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. |

## Validation Panel

[![A static image displaying the Map V2 Validation settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map_V2_Component_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map%20V2%20Component%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

### User Input

| Setting | Description |
| --- | --- |
| Required | This setting is currently in development. |

## Advanced Panel

[![A static image displaying the Map V2 Advanced settings](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map_V2_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map%20V2%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

### Set Execution

| Setting | Description |
| --- | --- |
| **Debounce the Calls After** | The number of milliseconds that pass before this component calls the Google Maps API using the **Data Reference Key** value. If your Data Reference Key dynamically updates, increase the value to reduce the call frequency to the Google Maps API. The default value is **600 ms**. |

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

### Additional Display Options

| Setting | Description |
| --- | --- |
| **The Default Location on Browser Load** | Enter a formatted address string for the map to begin on. |
| **Default Zoom Level** | The map's zoom level is based on the location set in **The Default Location on Browser Load** field. Set a value between `1 (World Map)` and `22 (Street Level)`. The default value is `8`. |
| **Point Zoom Level** | The level of zoom after setting a value between `1 (World Map)` and `22 (Street Level)`. The default for this setting is `15`. |
| **Height of Ma** | Set the height of the map viewport in pixels (px). The default value is `400px`. > [!NOTE] > This setting accepts only **pixel** values at this time. |
| **Width of Map** | Set the width of the map viewport in pixels (px) or percentage (%). The default value is `100%`. |

## Adding a Map V2 Component

For this example, create a module that lets end-users search for map locations by entering an address into an Address Search component. You need a **Google Map API** key to configure this module. Visit the Google Maps Platform website to obtain a key: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key).

### Configure the Address Search Component

First, configure an [Address Search](/v1/docs/address-search-component) component so end-users can enter an address that stores in the Map V2 component.

1. In the Module Builder, drag and drop an **Address Search** component onto the canvas.
2. In the Property ID field, enter `address`.
3. In the Label Text field, enter `Address Search`.
4. Under **Address Display Options**, set the **Show Street**, **Show City**, **Show State**, and **Show Country** toggles to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D) **(ON)**.
5. To the left of the component's configuration window, select **D****ata**.
6. From the **Select API** drop-down, select an available **Google Places API**. If you are in the Unqork Training environment, select **Creator Workshop Google Places API**.

> To learn more about Address Search APIs, view our [Enabling Address Search Using Address Services](/v1/docs/enabling-address-search-using-address-services) article.

[![Interface displaying Address Search component Data section with Creator Workshop Google Places API selected.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddressV1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/MapV2%20Component%20ExcampleASearch.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)
7. Navigate to the **Actions** settings.
8. In the **Trigger** field, enter `dwfFormatAddress`.
9. Click **Save & Close**.

### Configure the Data Workflow Component

The [Data Workflow](/v1/docs/data-workflow-component) component retrieves the formatted address from the Address Search component. Then, it sends it to a [Hidden](/v1/docs/hidden-component) component, so the Map V2 component can reference it.

1. Drag and drop a **D****ata Workflow** onto the canvas, placing it below the `address` **Address Search** component.
2. In the Property ID field, enter `dwfFormatAddress`.
3. In the Label Text field, enter `dwfFormatAddress`.
4. From the **Trigger Type** drop-down, select **Watch**.

#### Configure the Input Operator

The [Input](/v1/docs/input-operator) operator brings the data from the `address` **Address Search** component into the Data Workflow.

1. Drag and drop an **Input** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Component | address |
| Required | Yes |
| Source | Default |

#### Configure the Get Operator

The [Get](/v1/docs/get-operator) operator selects the formatted key from the `address` **Address Search** component. The formatted key is an address in a string format.

1. Drag and drop a **Get** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Label | formatted |
| Preserve Argument Type | ☐ (**unchecked**) |
| Path | formatted |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Get** operator.

#### Configure the Output Operator

The [Output](/v1/docs/output-operator) operator sends the data to the `hiddenAddress` **H****idden** component to store it.

1. Drag and drop an **Output** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Component | hiddenAddress |
| action | value |
3. Connect the output port (right) of the **Get** operator to the input port (left) of the **Output** operator.
4. Click **Save**.

Your completed Data Workflow looks like the following:

[![A static image displaying the dwfFormatAddress component's settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map_V2_Component_DWFExample_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map%20V2%20Component%20DWFExample.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

### Configure the Hidden Component

The [Hidden](/v1/docs/hidden-component) component stores the `formatted` address retrieved from the Data Workflow component. The Map V2 component uses the Hidden component as its Data Reference Key for placing a pin on the map view.

1. Drag and drop a **H****idden** component onto the canvas, placing it below the **dwfFormatAddress** **D****ata Workflow** component.
2. In the Property ID and Label Text fields, enter `hiddenAddress`.
3. Click **Save & Close**.

### Configure the Map V2 Component

Lastly, configure a Map V2 component for end-users to visualize the address they searched. You'll configure the component to be hidden, using the [Decisions](/v1/docs/decisions-component) component from earlier to make it visible when an end-user enters an address.

1. Drag and drop a Map V2 component onto the canvas, placing it below the `hiddenAddress` **H****idden** component.
2. In the Property ID field, enter `mapAddress`.
3. In the Label field, enter `Address`.
4. In the **Data Reference Key** field, enter `hiddenAddress`.
5. In the **Google Key** field, enter your Google Maps API key. You can acquire one here: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key).
6. Click **Save & Close**.
7. **Save** your module.

**Preview** your module in Express View. You'll see the following functionality:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Mapv2_Preview.webm?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

## Structure of a Map V2 Component's Data

When using a Data Reference Key, the Map V2 component stores the address string in a key and the coordinates in an array. From the previous example, you'll see the following in Express View and in the DevTools Console:

Here's how a Map V2 component looks in the component configuration view:

[![A static image displaying a Map V2 component in Express View.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map_V2_Component_DataStructureExpress_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map%20V2%20Component%20DataStructureExpress.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

Here's how the same Map V2 component looks in the DevTools Console:

[![A static image displaying a Map V2 component in the DevTools Console view.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map_V2_Component_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Map%20V2%20Component%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A08Z&se=2026-11-08T19%3A01%3A08Z&sr=c&sp=r&sig=PYbbIfxYobHDGR%2FMLFy5%2FW7Kzb%2Fmiot33%2BOtPsM9QoI%3D)

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

The DevTools Console helps you securely store, build, test, and deploy your software.