---
title: "Map v2 Component"
slug: "map-v2-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T18:05:11Z
published: 2026-09-15T18:05:11Z
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

The Map v2 component displays an interactive Google Maps instance. It supports dragging, zooming, satellite view, fullscreen, and street view. Data is sourced from a module field referenced by a Data Reference Key.

> **How to read settings tables**
> 
> The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: `inline code` — a value to type exactly as shown | **Bold** — a value selected from a drop-down, radio button, tab, or choice chip | **ON**/**OFF** — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

## General Settings

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Property ID | `key` | Text input | `map` | The unique identifier for this component instance. |

## Display Settings

### Field Text

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label Text | `label` | Text input | — | Identifies the component on the canvas and informs end-users what information is requested. |

### Default State Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Hide Field | `hidden` | Toggle | OFF | Hides the component from end-users but always displays in the Module Builder. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Make Map Draggable | `mapOptions.draggable` | Toggle | OFF | Lets end-users drag the map to pan. |
| Allow Map Zoom | `mapOptions.zoom` | Toggle | OFF | Lets end-users zoom the map in and out. |
| Allow Satellite View | `mapOptions.satellite` | Toggle | OFF | Lets end-users switch to satellite imagery. |
| Allow Fullscreen View | `mapOptions.fullscreen` | Toggle | OFF | Lets end-users expand the map to fullscreen. |
| Allow Street View | `mapOptions.streetview` | Toggle | OFF | Lets end-users drop into Google Street View. |
| Multiple Values | `multiple` | Toggle | OFF | Lets the map display multiple location points simultaneously. |
| Display as Text | `readOnlyView` | Toggle | OFF | Displays the stored value as plain text without the map. |
| Table View | `tableView` | Toggle | OFF | Includes the component value in table views. |

## Data Settings

### Data Storage

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Store Data in Database | `persistent` | Toggle | OFF | When set to **ON**, this setting this setting stores field values to the database when the module saves, end-users navigate between Panel components, or end-users navigate between workflow screens. Set to **OFF** to exclude this field from server-side submissions. |

> [!NOTE]
> Fields with **Store Data in Database** set to **OFF** are excluded from Plug-In component's API responses and Unqork's built-in tracker. When using a Plug-In component to remote-execute a module, any component whose value must be included in the API response requires **Store Data in Database** set to **ON**.

### Data Source

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Data Reference Key | `dataReferenceKey` | Text input | — | An optional reference to another data grid that supplies location data to the map. |
| Google Key | `googleKey` | Text input | — | The Google Maps API key used to render the map. |

## Validation Settings

## Advanced Settings

### Set Execution

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Debounce the Calls After | `debounce` | Number input | `600` | Sets the delay after the data reference key updates before re-rendering the map, in milliseconds (ms). |

### Additional Display Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| The Default Location on Browser Load | `defaultLocation` | Text input | `United States` | The location geocoded as the center of the map on load. |
| Default Zoom Level | `defaultZoom` | Number input | `8` | The zoom level when no map point is added. |
| Point Zoom Level | `pointZoom` | Number input | `15` | The zoom level when a map point is added. |
| Height of Map | `height` | Text input | `400px` | The map height in pixels or percentage (for example, `400px`, `50%`). |
| Width of Map | `width` | Text input | `100%` | The map width in pixels or percentage. |

### Additional Styling

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Custom CSS Class | `customClass` | Text input | — | A CSS class applied to the component for custom styling. |

---

**Changelog**

| Date | Change |
| --- | --- |
| — | Initial publication. |

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

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

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.

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.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

Rendering is the process of loading components and displaying the final result on the front-end screen.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

Rendering is the process of loading components and displaying the final result on the front-end screen.

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