Map Embed

Third-party map rendered in the page.

html

<div class="map-embed map-embed--light map-embed--rounded" role="img" aria-label="Map preview: Nearby cafés, zoom level 12">
  <svg class="map-embed__pin" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true"><path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" fill="#E8A020"/><circle cx="12" cy="9" r="2.6" fill="#FAF7F2"/></svg>
  <p class="map-embed__meta">Nearby cafés · zoom 12</p>
</div>
<!-- Replace with a real embed in production, e.g.:
<iframe title="Nearby cafés" src="https://your-map-provider.example/embed?q=..." loading="lazy" style="border:0;"></iframe> -->
<style>
.map-embed { position: relative; max-width: 360px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #24143022; display: flex; align-items: flex-end; }
.map-embed--light { background-color: #FAF7F2; background-image: repeating-linear-gradient(0deg, #24143014 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 24px); }
.map-embed--dark { background-color: #241430; background-image: repeating-linear-gradient(0deg, #ffffff14 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, #ffffff14 0 1px, transparent 1px 24px); color: #FAF7F2; }
.map-embed--rounded { border-radius: 14px; }
.map-embed__pin { position: absolute; top: 42%; left: 48%; transform: translate(-50%, -100%); }
.map-embed__meta { margin: 0; padding: 6px 10px; font: 600 12px/1.4 system-ui, sans-serif; background: #241430cc; color: #FAF7F2; width: 100%; }
</style>

tailwind

<div class="map-embed-tw map-embed-tw--light rounded-2xl relative max-w-[360px] overflow-hidden border border-[#24143022] flex items-end" style="aspect-ratio:4/3;" role="img" aria-label="Map preview: Nearby cafés, zoom level 12">
  <svg class="absolute" style="top:42%;left:48%;transform:translate(-50%,-100%);" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true"><path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" fill="#E8A020"/><circle cx="12" cy="9" r="2.6" fill="#FAF7F2"/></svg>
  <p class="m-0 w-full px-2.5 py-1.5 text-xs font-semibold text-[#FAF7F2]" style="background:#241430cc;">Nearby cafés · zoom 12</p>
</div>
<!-- Replace with a real embed in production, e.g.:
<iframe title="Nearby cafés" src="https://your-map-provider.example/embed?q=..." loading="lazy" class="border-0"></iframe> -->
<style>
.map-embed-tw--light { background-color: #FAF7F2; background-image: repeating-linear-gradient(0deg, #24143014 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 24px); }
.map-embed-tw--dark { background-color: #241430; background-image: repeating-linear-gradient(0deg, #ffffff14 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, #ffffff14 0 1px, transparent 1px 24px); color: #FAF7F2; }
</style>

react

export function MapEmbed({
  title = "Nearby cafés",
  theme = "light",
  zoom = 12,
  rounded = true,
}) {
  const dark = theme === "dark";
  return (
    <div
      role="img"
      aria-label={`Map preview: ${title}, zoom level ${zoom}`}
      style={{
        position: "relative", maxWidth: 360, aspectRatio: "4 / 3", overflow: "hidden",
        border: "1px solid #24143022", display: "flex", alignItems: "flex-end",
        borderRadius: rounded ? 14 : 0,
        background: dark ? "#241430" : "#FAF7F2",
        backgroundImage: `repeating-linear-gradient(0deg, ${dark ? "#ffffff14" : "#24143014"} 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, ${dark ? "#ffffff14" : "#24143014"} 0 1px, transparent 1px 24px)`,
      }}
    >
      {/* Replace with a real embed in production, e.g.
      <iframe title={title} src="https://your-map-provider.example/embed?q=..." loading="lazy" style={{ border: 0 }} /> */}
      <svg style={{ position: "absolute", top: "42%", left: "48%", transform: "translate(-50%, -100%)" }} viewBox="0 0 24 24" width={26} height={26} aria-hidden="true">
        <path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" fill="#E8A020" />
        <circle cx="12" cy="9" r="2.6" fill="#FAF7F2" />
      </svg>
      <p style={{ margin: 0, padding: "6px 10px", font: "600 12px/1.4 system-ui, sans-serif", background: "#241430cc", color: "#FAF7F2", width: "100%" }}>
        {title} · zoom {zoom}
      </p>
    </div>
  );
}