# MapEmbed

> An embedded street map centred on a place, with a marker and a link to the full map; no key, no script.

URL: https://apogee.avaui.dev/docs/map-embed
Last updated: 2026-10-15

An embedded street map centred on a place, with a marker and a link to the full map; no key, no script.

Last updated October 15, 2026

```astro
<MapEmbed lat={-37.8183} lon={144.9671} title="Map of our Melbourne office" class="h-80" />
```

## Add

```sh
npx @ava-ui/apogee add map-embed
```

Pulls in Link. The map comes from OpenStreetMap, so there is no account or API key to set up.

## Usage

```astro
---
import MapEmbed from '@/components/apogee/MapEmbed/MapEmbed.astro'
---
<MapEmbed lat={51.5154} lon={-0.141} title="Map of our London office" class="aspect-video" />
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lat` | `number` | — | Required. Latitude of the place. |
| `lon` | `number` | — | Required. Longitude of the place. |
| `title` | `string` | — | Required. Names the frame for screen readers (“Map of our Melbourne office”). |
| `span` | `number` | `0.04` | Degrees of longitude shown across; smaller is closer. |
| `rounded` | `boolean` | `true` | Rounded corners. |
| `linkLabel` | `string` | `'Open the full map'` | Text of the link under the map; an empty string hides it. |
| `class` | `string` | — | Size it here (`h-96`, `aspect-video`); the map fills the box. |

## Variants

Closer, square corners, no link:

```astro
<MapEmbed lat={51.5154} lon={-0.141} span={0.01} rounded={false} linkLabel="" title="Map of our London office" class="h-64" />
```

## States

-   **Loading** — the frame loads lazily and shows a neutral fill until it arrives.

## Examples

Maps in contact layouts: [Contact sections](https://apogee.avaui.dev/docs/contact-sections).

## Accessibility

-   The iframe is named by `title`; the link under it opens the same place in a new tab for anyone who cannot use the frame.
-   The map is someone else’s page; Apogee’s checks skip inside it.

## Tokens

| Token | Used for |
| --- | --- |
| `--background-neutral-faded` | The frame while it loads |

## Do / Don’t

-   **Do** write the address as text next to the map; a map alone is not an address.
-   **Don’t** embed a map for a place people never visit.

## Content

-   Name the place in the title: “Map of our Melbourne office”, not “Map”.

## Related

[

WorldMapA dotted world map with office pins; each pin names its place on hover or focus and links to it on a full map.

](https://apogee.avaui.dev/docs/world-map)[

ImageA responsive, lazy-loaded image — wraps astro:assets Image with sensible defaults.

](https://apogee.avaui.dev/docs/image)[

LinkAn inline text link — for a link that should look like a button, use Button with href instead.

](https://apogee.avaui.dev/docs/link)