Section

Map

1 个模板实例,15 个 section 配置,1 类 block。

真实模板变体

Schema

{
  "name": "Map",
  "settings": [
    {
      "type": "text",
      "id": "googlemaps_api_key",
      "label": "Google maps API key",
      "info": "You’ll need to [register a Google Maps API Key](https://documentation.fuelthemes.net/kb/map/) to display the map."
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "Displayed if the map isn’t loaded"
    },
    {
      "type": "header",
      "content": "Map"
    },
    {
      "type": "select",
      "id": "desktop_height",
      "label": "Desktop height",
      "options": [
        {
          "value": "desktop-height-450",
          "label": "450px"
        },
        {
          "value": "desktop-height-550",
          "label": "550px"
        },
        {
          "value": "desktop-height-650",
          "label": "650px"
        }
      ],
      "default": "desktop-height-450"
    },
    {
      "type": "select",
      "id": "mobile_height",
      "label": "Mobile height",
      "options": [
        {
          "value": "mobile-height-350",
          "label": "350px"
        },
        {
          "value": "mobile-height-400",
          "label": "400px"
        },
        {
          "value": "mobile-height-450",
          "label": "450px"
        }
      ],
      "default": "mobile-height-350"
    },
    {
      "type": "select",
      "id": "map_type",
      "label": "Type",
      "default": "roadmap",
      "options": [
        {
          "value": "roadmap",
          "label": "RoadMap"
        },
        {
          "value": "satellite",
          "label": "Satellite"
        },
        {
          "value": "hybrid",
          "label": "Hybrid"
        }
      ]
    },
    {
      "type": "select",
      "id": "map_style_select",
      "label": "Style",
      "options": [
        {
          "value": "default",
          "label": "Default"
        },
        {
          "value": "retro",
          "label": "Retro"
        },
        {
          "value": "night",
          "label": "Night"
        }
      ]
    },
    {
      "type": "range",
      "id": "map_zoom",
      "min": 0,
      "max": 20,
      "step": 1,
      "label": "Zoom",
      "default": 0,
      "info": "Leave at 0 for automatic calculation."
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": "Text",
      "default": "#151515"
    },
    {
      "type": "color",
      "id": "color_border",
      "label": "Borders",
      "default": "#151515"
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "checkbox",
      "id": "disable_top_spacing",
      "default": false,
      "label": "Remove top spacing"
    },
    {
      "type": "checkbox",
      "id": "disable_bottom_spacing",
      "default": false,
      "label": "Remove bottom spacing"
    }
  ],
  "blocks": [
    {
      "type": "pin",
      "name": "Pin",
      "settings": [
        {
          "type": "header",
          "content": "Pin image"
        },
        {
          "type": "image_picker",
          "id": "pin_image",
          "label": "Image",
          "info": "80 x 108 px .png recommended."
        },
        {
          "type": "checkbox",
          "id": "pin_retina",
          "label": "Retina image",
          "default": true,
          "info": "The pin will be shown at half size"
        },
        {
          "type": "header",
          "content": "Marker settings",
          "info": "You can learn how to get your marker coordinates at [https://support.google.com/maps/answer/18539?hl=en](https://support.google.com/maps/answer/18539)"
        },
        {
          "id": "pin_lat",
          "type": "text",
          "label": "Latitude",
          "default": "33.9787261",
          "info": "Latitude coordinate for the marker. Example: 41.40338"
        },
        {
          "id": "pin_long",
          "type": "text",
          "label": "Longtitude",
          "default": "-118.4197832",
          "info": "Longtitude coordinate for the marker. Example: 29.0023211"
        },
        {
          "id": "pin_title",
          "type": "text",
          "label": "Title"
        },
        {
          "id": "pin_desc",
          "type": "textarea",
          "label": "Description"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Map",
      "blocks": [
        {
          "type": "pin"
        }
      ]
    }
  ]
}