Edit Location Map

Name

Also known as (comma separated)

Brief definition Embedded map showing a business location.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "address", "type": "text", "label": "Address", "default": "48 Rivermill Lane, Austin, TX" }, { "id": "theme", "type": "select", "label": "Map theme", "default": "light", "options": [ "light", "dark" ] }, { "id": "pinColor", "type": "color", "label": "Pin colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showDirections", "type": "toggle", "label": "Show directions button", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"lmap lmap--{{theme}}\">\n <div class=\"lmap__canvas\" role=\"img\" aria-label=\"Map showing location at {{address}}\">\n <span class=\"lmap__pin\" style=\"color:{{pinColor}};\" aria-hidden=\"true\">&#128205;</span>\n </div>\n <div class=\"lmap__footer\">\n <p class=\"lmap__address\">{{address}}</p>\n {{#if showDirections}}<a href=\"#\" class=\"lmap__cta\" style=\"background:{{pinColor}};\">Get directions</a>{{/if}}\n </div>\n</div>\n<style>\n.lmap { font: 14px system-ui, sans-serif; color: #241430; max-width: 320px; border-radius: 14px; overflow: hidden; border: 1px solid #24143022; }\n.lmap__canvas { height: 160px; position: relative; background-image: radial-gradient(#24143022 1px, transparent 1px); background-size: 14px 14px; background-color: #FAF7F2; display: flex; align-items: center; justify-content: center; }\n.lmap--dark .lmap__canvas { background-color: #241430; background-image: radial-gradient(#FAF7F233 1px, transparent 1px); }\n.lmap__pin { font-size: 30px; }\n.lmap__footer { padding: 14px 16px; background: #FAF7F2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.lmap__address { margin: 0; color: #241430cc; }\n.lmap__cta { flex-shrink: 0; color: #FAF7F2; text-decoration: none; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; }\n.lmap__cta:hover, .lmap__cta:focus-visible { opacity: .9; }\n</style>", "tailwind": "<div class=\"lmap-tw lmap-tw--{{theme}} font-sans text-sm text-[#241430] max-w-[320px] rounded-2xl overflow-hidden border border-[#24143022]\">\n <div class=\"lmap-tw__canvas h-40 relative flex items-center justify-center bg-[#FAF7F2]\" style=\"background-image: radial-gradient(#24143022 1px, transparent 1px); background-size: 14px 14px;\" role=\"img\" aria-label=\"Map showing location at {{address}}\">\n <span class=\"text-3xl\" style=\"color:{{pinColor}};\" aria-hidden=\"true\">&#128205;</span>\n </div>\n <div class=\"px-4 py-3.5 bg-[#FAF7F2] flex items-center justify-between gap-2.5\">\n <p class=\"m-0 text-[#241430]/80\">{{address}}</p>\n {{#if showDirections}}<a href=\"#\" class=\"flex-shrink-0 text-[#FAF7F2] no-underline font-bold text-[13px] px-3.5 py-2 rounded-lg hover:opacity-90\" style=\"background:{{pinColor}};\">Get directions</a>{{/if}}\n </div>\n</div>\n<style>\n.lmap-tw--dark .lmap-tw__canvas { background-color: #241430; background-image: radial-gradient(#FAF7F233 1px, transparent 1px) !important; }\n</style>", "react": "export function LocationMap({\n address = \"{{address}}\",\n theme = \"{{theme}}\",\n pinColor = \"{{pinColor}}\",\n showDirections = {{showDirections}},\n}) {\n const dark = theme === \"dark\";\n return (\n <div style={{ font: \"14px system-ui, sans-serif\", color: \"#241430\", maxWidth: 320, borderRadius: 14, overflow: \"hidden\", border: \"1px solid #24143022\" }}>\n <div role=\"img\" aria-label={`Map showing location at ${address}`} style={{ height: 160, position: \"relative\",\n display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n backgroundColor: dark ? \"#241430\" : \"#FAF7F2\",\n backgroundImage: `radial-gradient(${dark ? \"#FAF7F233\" : \"#24143022\"} 1px, transparent 1px)`,\n backgroundSize: \"14px 14px\" }}>\n <span aria-hidden=\"true\" style={{ fontSize: 30, color: pinColor }}>&#128205;</span>\n </div>\n <div style={{ padding: \"14px 16px\", background: \"#FAF7F2\", display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", gap: 10 }}>\n <p style={{ margin: 0, color: \"#241430cc\" }}>{address}</p>\n {showDirections && (\n <a href=\"#\" style={{ flexShrink: 0, color: \"#FAF7F2\", textDecoration: \"none\", fontWeight: 700, fontSize: 13,\n padding: \"8px 14px\", borderRadius: 8, background: pinColor }}>Get directions</a>\n )}\n </div>\n </div>\n );\n}" }