Media & time
Map embed
An embedded map, without the privacy footgun.
Import
import { MapEmbed } from '@the_viveksingh/vivek-ui'OpenStreetMap
The default provider. It sets no cookies and runs no analytics, so it loads immediately with nothing to consent to.
OpenStreetMap is the default. It sets no cookies and runs no analytics, so it loads straight away with nothing to consent to.
<MapEmbed lat={12.9716} lon={77.5946} zoom={13} title="Our Bengaluru office" />Google, behind a consent gate
A Google Maps iframe contacts Google and sets cookies the moment it renders — before the visitor has agreed to anything. It is gated by default.
Google is gated behind a click by default: the iframe contacts Google and sets cookies the moment it renders, which is a consent problem the embedding site owns.
<MapEmbed provider="google" query="Bengaluru, India" title="Our Bengaluru office" />
// Once your consent banner has already handled it:
<MapEmbed provider="google" query="Bengaluru, India" title="Office" requireConsent={false} />Props
Generated from the package's own type declarations, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
query | string | — | A place name or address, e.g. `"Bengaluru, India"`. Ignored if `lat`/`lon` are given. |
lat | number | — | — |
lon | number | — | — |
zoom | number | — | 1 is the whole world, 20 is a building. Default `14`. |
provider | MapProvider | — | Default `openstreetmap`, and that default is a privacy decision — see the note on `requireConsent`. |
title required | string | — | Required. An `<iframe>` with no title is announced as "frame", and a page with several is unnavigable. |
ratio | number | — | — |
requireConsent | boolean | — | Gate loading behind a click. Defaults to `true` for Google and `false` for OpenStreetMap, because that is where the difference actually lies: a Google Maps iframe contacts Google and sets cookies the moment it renders, before the visitor has agreed to anything. Under GDPR that is the embedding site's problem, and it is the reason cookie banners exist on pages whose only third party is a map. OpenStreetMap sets no cookies and runs no analytics, so it loads directly. |
consentLabel | ReactNode | — | Copy for the consent gate. |
consentButtonLabel | string | — | — |
apiKey | string | — | Google Maps Embed API key. Without one, the keyless `maps.google.com` embed is used. |
Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.
Rendering
MapEmbed declares 'use client' because it needs state, effects or event handlers. Importing it into a Server Component creates a client boundary at this component — everything above it stays on the server.