Trips & places Map Embed

Map Embed

The place on a map — OpenStreetMap by default, lazy-loaded.

Preview

tsx

import { MapEmbed } from "zostel-ui";

<MapEmbed lat={32.2396} lng={77.1887} zoom={14} title="Map of Manali" />

Prop	Type	Default	Description
`lat / lng`	`number`	—	Where.
`zoom`	`number`	`15`	Google only; the OSM view shows ±0.01°.
`provider`	`"osm" \| "google"`	`"osm"`	The map service.
`title`	`string`	`"Map"`	The iframe’s name for screen readers.
`aspectRatio`	`number`	`16 / 9`	Width ÷ height.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

lat / lng

Type: number

Default: —

Where.

zoom

Type: number

Default: 15

Google only; the OSM view shows ±0.01°.

provider

Type: "osm" | "google"

Default: "osm"

The map service.

title

Type: string

Default: "Map"

The iframe’s name for screen readers.

aspectRatio

Type: number

Default: 16 / 9

Width ÷ height.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).