Location Map

Embedded map showing a business location.

html

<div class="lmap lmap--light">
  <div class="lmap__canvas" role="img" aria-label="Map showing location at 48 Rivermill Lane, Austin, TX">
    <span class="lmap__pin" style="color:#E8A020;" aria-hidden="true">&#128205;</span>
  </div>
  <div class="lmap__footer">
    <p class="lmap__address">48 Rivermill Lane, Austin, TX</p>
    <a href="#" class="lmap__cta" style="background:#E8A020;">Get directions</a>
  </div>
</div>
<style>
.lmap { font: 14px system-ui, sans-serif; color: #241430; max-width: 320px; border-radius: 14px; overflow: hidden; border: 1px solid #24143022; }
.lmap__canvas { height: 160px; position: relative; background-image: radial-gradient(#24143022 1px, transparent 1px); background-size: 14px 14px; background-color: #FAF7F2; display: flex; align-items: center; justify-content: center; }
.lmap--dark .lmap__canvas { background-color: #241430; background-image: radial-gradient(#FAF7F233 1px, transparent 1px); }
.lmap__pin { font-size: 30px; }
.lmap__footer { padding: 14px 16px; background: #FAF7F2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lmap__address { margin: 0; color: #241430cc; }
.lmap__cta { flex-shrink: 0; color: #FAF7F2; text-decoration: none; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; }
.lmap__cta:hover, .lmap__cta:focus-visible { opacity: .9; }
</style>

tailwind

<div class="lmap-tw lmap-tw--light font-sans text-sm text-[#241430] max-w-[320px] rounded-2xl overflow-hidden border border-[#24143022]">
  <div class="lmap-tw__canvas h-40 relative flex items-center justify-center bg-[#FAF7F2]" style="background-image: radial-gradient(#24143022 1px, transparent 1px); background-size: 14px 14px;" role="img" aria-label="Map showing location at 48 Rivermill Lane, Austin, TX">
    <span class="text-3xl" style="color:#E8A020;" aria-hidden="true">&#128205;</span>
  </div>
  <div class="px-4 py-3.5 bg-[#FAF7F2] flex items-center justify-between gap-2.5">
    <p class="m-0 text-[#241430]/80">48 Rivermill Lane, Austin, TX</p>
    <a href="#" class="flex-shrink-0 text-[#FAF7F2] no-underline font-bold text-[13px] px-3.5 py-2 rounded-lg hover:opacity-90" style="background:#E8A020;">Get directions</a>
  </div>
</div>
<style>
.lmap-tw--dark .lmap-tw__canvas { background-color: #241430; background-image: radial-gradient(#FAF7F233 1px, transparent 1px) !important; }
</style>

react

export function LocationMap({
  address = "48 Rivermill Lane, Austin, TX",
  theme = "light",
  pinColor = "#E8A020",
  showDirections = true,
}) {
  const dark = theme === "dark";
  return (
    <div style={{ font: "14px system-ui, sans-serif", color: "#241430", maxWidth: 320, borderRadius: 14, overflow: "hidden", border: "1px solid #24143022" }}>
      <div role="img" aria-label={`Map showing location at ${address}`} style={{ height: 160, position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
        backgroundColor: dark ? "#241430" : "#FAF7F2",
        backgroundImage: `radial-gradient(${dark ? "#FAF7F233" : "#24143022"} 1px, transparent 1px)`,
        backgroundSize: "14px 14px" }}>
        <span aria-hidden="true" style={{ fontSize: 30, color: pinColor }}>&#128205;</span>
      </div>
      <div style={{ padding: "14px 16px", background: "#FAF7F2", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
        <p style={{ margin: 0, color: "#241430cc" }}>{address}</p>
        {showDirections && (
          <a href="#" style={{ flexShrink: 0, color: "#FAF7F2", textDecoration: "none", fontWeight: 700, fontSize: 13,
            padding: "8px 14px", borderRadius: 8, background: pinColor }}>Get directions</a>
        )}
      </div>
    </div>
  );
}