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

# Base Map Component

> Defines the base structure for map integrations across Scanova categories. This component can be extended to include additional fields such as custom markers, labels, or overlays.

## Overview

The **Base Map Component** provides a standardized way to display location-based data within QR Code landing pages.\
It supports popular map providers like **Google Maps** and **Baidu Maps**, enabling consistent rendering of location details across various categories such as **Business Card**, **Real Estate**, and **Map QR Codes**.

This component defines the essential geographic fields — latitude, longitude, and place metadata — and can be extended to support custom behavior (e.g., zoom levels, overlays, or directions).

> 🧭 **Related Component:** The Map Location Component extends this base schema by adding an interactive button (e.g., “Get Directions”) for enhanced map-based user interactions.

## Properties

| Property     | Type     | Required | Description                                                                             |
| :----------- | :------- | :------- | :-------------------------------------------------------------------------------------- |
| **location** | `object` | ✅ Yes    | Contains detailed information about the map provider, coordinates, and display options. |

***

### 🧩 **Location Object**

| Sub-Property  | Type                | Required | Description                                                                                              |
| :------------ | :------------------ | :------- | :------------------------------------------------------------------------------------------------------- |
| **provider**  | `string`            | ✅ Yes    | Map provider. Supported values: `google`, `baidu`.                                                       |
| **latitude**  | `number` / `string` | ✅ Yes    | Latitude coordinate of the location.                                                                     |
| **longitude** | `number` / `string` | ✅ Yes    | Longitude coordinate of the location.                                                                    |
| **placeId**   | `string`            | ✅ Yes    | Unique ID for the location (used for precise identification on map APIs).                                |
| **placeName** | `string`            | No       | Name of the location displayed to the user (useful when the map title may be ambiguous).                 |
| **zoom**      | `number`            | No       | Zoom level to apply when the map is rendered. Typically between `0` (world view) and `20` (street view). |

**Related Component:** The Map Location Component extends this base schema by adding an interactive button (e.g., “Get Directions”) for enhanced map-based user interactions.

## Used In Categories

This component is utilized in the following QR Code categories:

* [Business Card](/guides/category-components/categories/businessCard)
* [Dynamic VCard](/guides/category-components/categories/dynamicVCard)
* [Map](/guides/category-components/categories/map)
* [Real Estate](/guides/category-components/categories/realEstate)

## Example Schema

<CodeGroup>
  ```json Schema theme={null}
  {
    "$schema": "http://json-schema.org/draft-07/schema#",
    "definitions": {},
    "title": "Base map component",
    "description": "This component can be extended to add extra properties",
    "type": "object",
    "required": [
      "location"
    ],
    "properties": {
      "location": {
        "type": "object",
        "required": [
          "provider",
          "latitude",
          "longitude",
          "placeId"
        ],
        "additionalProperties": false,
        "properties": {
          "provider": {
            "type": "string",
            "enum": [
              "google",
              "baidu"
            ],
            "title": "Provider of the map",
            "description": "Provider of the map. Ex., Google, Baidu, etc."
          },
          "latitude": {
            "oneOf": [
              {
                "type": "number"
              },
              {
                "type": "string"
              }
            ],
            "title": "Latitude",
            "description": "Latitude of the location."
          },
          "longitude": {
            "oneOf": [
              {
                "type": "number"
              },
              {
                "type": "string"
              }
            ],
            "title": "Longitude",
            "description": "Longitude of the location."
          },
          "placeId": {
            "type": "string",
            "title": "Place id",
            "description": "Used to locate the particular place on the map"
          },
          "placeName": {
            "type": "string",
            "title": "Place name",
            "minLength": 2,
            "description": "Place name displayed to the user in case map title is mis-guiding."
          },
          "zoom": {
            "type": "number",
            "title": "Zoom level of the map",
            "description": "Zoom level of the map to set when map is rendered"
          }
        }
      }
    }
  }
  ```
</CodeGroup>

## Notes

* **Required fields** (`provider`, `latitude`, `longitude`, `placeId`) ensure accurate rendering of the map.
* **Optional fields** like `placeName` and `zoom` improve readability and visual context.
* Extend this component to include additional display elements such as **custom map markers**, **directions**, or **highlight overlays**.
* All coordinates support both numeric and string formats for flexibility in API responses.

***