01
The markup
Swap in the ID of any published map.
<iframe
src="https://knowmapped.com/view/27aca0fe-ea08-4a15-97ee-b0ade9ae4dff?embed=1"
width="100%"
height="650"
style="border:0"
loading="lazy"
allowfullscreen>
</iframe>See it in action.
The map below is a regular public embed—no screenshot or special demo build.
The iframe embed.
This is the version KnowMapped copies from public maps and the map editor. It works well in CMS code blocks and keeps the map isolated from the surrounding page.
02
Adjust settings
The copied URL reflects the viewing mode you chose in KnowMapped.
Each time you make changes to your map, you must republish by selectingUpdate public map in the KnowMapped map editor.
The Web Component
Want a more seamless integration? The Web Component puts the renderer directly in your document and gives you a few useful presentation switches. It has no dependency on your site’s framework, and existing component embeds remain supported.
<script type="module" src="https://knowmapped.com/embed/v1/knowmapped-embed.js"></script>
<knowmapped-map
map-id="27aca0fe-ea08-4a15-97ee-b0ade9ae4dff"
show-title
height="650px"
data-width="normal"
data-show-frame="true"
data-show-background="true"
data-exploration="true">
</knowmapped-map>Boolean options default to on. The explicit form for turning one off isshow-title="false" (and the same pattern applies to the other boolean attributes).
| Attribute | Required | Description |
|---|---|---|
map-id | Yes | UUID of the public KnowMapped map to display. |
show-title | No | Displays the map title above the visualization. Defaults to shown. |
height | No | Sets any valid CSS height, such as 650px, 70vh, or clamp(400px, 60vw, 800px). Without it, the map chooses a responsive height automatically. |
data-width | No | Controls the layout width. Accepts normal (default), wide, or full. |
data-show-frame | No | Shows the border, rounded corners, and shadow. Set to false for a frameless map. Defaults to true. |
data-show-background | No | Shows the map theme background and grid. Set to false for a transparent background. Defaults to true. |
data-exploration | No | Allows visitors to pan and zoom the map. On touch devices, visitors first choose Explore map. Set to false for a fixed presentation. Defaults to true. |
A few implementation notes.
Embeds use the public, read-only representation of a map. They never grant editing access, and a private map stays private. Publish the map in KnowMapped before embedding it.
Interaction
Visitors can pan, zoom, and inspect map relationships.
Layout
The map fills its available width and adapts across screen sizes.
Framework-neutral
The component works in plain HTML, Astro, WordPress, React, and other web stacks.
Public maps only
Only maps that are explicitly published as public are presented through the embed code.
Using a publishing platform?
A publishing integration can handle the embed wiring for you.