Fmt
FmtMap
Embeds a Google Maps iframe by address, coordinates, or search query — no API key required.
Fmt
The Fmt category provides stateless display formatters. Each component is a thin wrapper around native Intl APIs, VueUse, or Nuxt utilities — they accept a raw value and render formatted output without any side effects.
Components
<XAFmtMap />
Embeds a Google Maps iframe using the no-API-key embed URL. Accepts an address string, lat/lng coordinates, or a search query. Renders client-side only (<ClientOnly>).
<XAFmtMap address="1600 Amphitheatre Parkway, Mountain View, CA" :height="300" />
<XAFmtMap :lat="37.4224764" :lng="-122.0842499" :zoom="17" />
<XAFmtMap query="coffee shops near Times Square" map-type="satellite" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
address | String | null | Address string to search for |
query | String | null | Free-text search query |
lat | Number | null | Latitude coordinate |
lng | Number | null | Longitude coordinate |
zoom | Number | 15 | Zoom level (1–21) |
width | String | Number | '100%' | Container width |
height | String | Number | 300 | Container height (px) |
mapType | 'roadmap' | 'satellite' | 'roadmap' | Map display type |
allowFullscreen | Boolean | true | Enable fullscreen button |
loading | 'lazy' | 'eager' | 'lazy' | Iframe loading strategy |
containerClass | String | '' | Additional container CSS classes |
AI Context
component: XAFmtMap
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Fmt
use-when: Embedding a Google Maps iframe for an address, coordinates, or search query. No API key required. Renders client-side only via ClientOnly.