Map Marker

Pin indicating a location on a map.

html

<div class="map-marker-swatch" aria-hidden="true">
  <div class="map-marker map-marker--pin" style="--marker-color:#E8A020;--marker-size:28px;">
    <span class="map-marker__ring"></span>
    <svg class="map-marker__pin" viewBox="0 0 24 24" width="28" height="28" role="img" aria-label="Map marker"><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>
    <svg class="map-marker__dot" viewBox="0 0 24 24" width="28" height="28" role="img" aria-label="Map marker"><circle cx="12" cy="12" r="8" fill="#E8A020" stroke="#FAF7F2" stroke-width="2"/></svg>
  </div>
</div>
<style>
.map-marker-swatch { max-width: 220px; aspect-ratio: 4 / 3; border-radius: 12px; background: #FAF7F2 repeating-linear-gradient(0deg, #24143014 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 22px); border: 1px solid #24143022; display: flex; align-items: center; justify-content: center; }
.map-marker { position: relative; display: flex; align-items: center; justify-content: center; }
.map-marker__pin, .map-marker__dot { display: none; }
.map-marker--pin .map-marker__pin { display: block; }
.map-marker--dot .map-marker__dot { display: block; }
.map-marker__ring { position: absolute; width: calc(var(--marker-size) * 1.8); height: calc(var(--marker-size) * 1.8); border-radius: 50%; background: var(--marker-color); opacity: .35; }
@keyframes map-marker-pulse { 0% { transform: scale(.5); opacity: .45; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .map-marker__ring { animation: map-marker-pulse .2s ease-out infinite; }
}
</style>

tailwind

<div class="map-marker-swatch-tw max-w-[220px] border border-[#24143022] rounded-xl flex items-center justify-center" style="aspect-ratio:4/3;background-color:#FAF7F2;background-image:repeating-linear-gradient(0deg,#24143014 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,#24143014 0 1px,transparent 1px 22px);" aria-hidden="true">
  <div class="map-marker-tw map-marker-tw--pin relative flex items-center justify-center" style="--marker-color:#E8A020;--marker-size:28px;">
    <span class="map-marker-tw__ring absolute rounded-full" style="width:calc(var(--marker-size) * 1.8);height:calc(var(--marker-size) * 1.8);background:var(--marker-color);opacity:.35;"></span>
    <svg class="map-marker-tw__pin" viewBox="0 0 24 24" width="28" height="28" role="img" aria-label="Map marker"><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>
    <svg class="map-marker-tw__dot" viewBox="0 0 24 24" width="28" height="28" role="img" aria-label="Map marker"><circle cx="12" cy="12" r="8" fill="#E8A020" stroke="#FAF7F2" stroke-width="2"/></svg>
  </div>
</div>
<style>
.map-marker-tw__pin, .map-marker-tw__dot { display: none; }
.map-marker-tw--pin .map-marker-tw__pin { display: block; }
.map-marker-tw--dot .map-marker-tw__dot { display: block; }
@keyframes map-marker-tw-pulse { 0% { transform: scale(.5); opacity: .45; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .map-marker-tw__ring { animation: map-marker-tw-pulse .2s ease-out infinite; }
}
</style>

react

export function MapMarker({
  color = "#E8A020",
  size = 28,
  pulse = true,
  shape = "pin",
}) {
  return (
    <div style={{ maxWidth: 220, aspectRatio: "4 / 3", borderRadius: 12, border: "1px solid #24143022",
      display: "flex", alignItems: "center", justifyContent: "center", background: "#FAF7F2",
      backgroundImage: "repeating-linear-gradient(0deg, #24143014 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 22px)" }} aria-hidden="true">
      <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
        {pulse && (
          <span style={{ position: "absolute", width: size * 1.8, height: size * 1.8, borderRadius: "50%",
            background: color, opacity: 0.35 }} />
        )}
        {shape === "pin" ? (
          <svg viewBox="0 0 24 24" width={size} height={size} role="img" aria-label="Map marker">
            <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={color} />
            <circle cx="12" cy="9" r="2.6" fill="#FAF7F2" />
          </svg>
        ) : (
          <svg viewBox="0 0 24 24" width={size} height={size} role="img" aria-label="Map marker">
            <circle cx="12" cy="12" r="8" fill={color} stroke="#FAF7F2" strokeWidth="2" />
          </svg>
        )}
      </div>
    </div>
  );
}