Map Embed

An embedded map component for displaying property locations with a pin marker, address, and link to open in maps.

Preview

Usage

tsx

import { MapEmbed } from "zostel-ui";

<MapEmbed
  lat={32.2396}
  lng={77.1887}
  name="Zostel Manali"
  address="Old Manali, Himachal Pradesh 175131"
  variant="default"
/>

Props

Prop	Type	Default	Description
`lat`	`number`	—	Latitude coordinate
`lng`	`number`	—	Longitude coordinate
`name`	`string`	—	Property or location name
`address`	`string`	—	Full address text
`variant`	`"default" \| "compact"`	"default"	Layout variant
`height`	`number`	256	Map height in pixels

lat

Type: number

Default: —

Latitude coordinate

lng

Type: number

Default: —

Longitude coordinate

name

Type: string

Default: —

Property or location name

address

Type: string

Default: —

Full address text

variant

Type: "default" | "compact"

Default: "default"

Layout variant

height

Type: number

Default: 256

Map height in pixels

Previous Dark Mode Toggle Next Blog Card