Base Map Component

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:

Example Schema

{
  "$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"
        }
      }
    }
  }
}

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.

Getting Started

Code Examples

Category Components

Categories

Overview

Properties

🧩 Location Object

Used In Categories

Example Schema

Notes

​Overview

​Properties

​🧩 Location Object

​Used In Categories

​Example Schema

​Notes

Overview

Properties

🧩 Location Object

Used In Categories

Example Schema

Notes