Skip to main content

​
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

PropertyTypeRequiredDescription
locationobject✅ YesContains detailed information about the map provider, coordinates, and display options.

​
🧩 Location Object

Sub-PropertyTypeRequiredDescription
providerstring✅ YesMap provider. Supported values: google, baidu.
latitudenumber / string✅ YesLatitude coordinate of the location.
longitudenumber / string✅ YesLongitude coordinate of the location.
placeIdstring✅ YesUnique ID for the location (used for precise identification on map APIs).
placeNamestringNoName of the location displayed to the user (useful when the map title may be ambiguous).
zoomnumberNoZoom 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.