Google Maps embed

<!-- 1. the straightforward version -->
<div class="map">
  <iframe
    src="https://www.google.com/maps?q=Leeds+City+Museum,+Leeds&output=embed"
    title="Map showing Leeds City Museum, Millennium Square, Leeds"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allowfullscreen></iframe>
</div>

<p class="under">
  <a href="https://www.google.com/maps?q=Leeds+City+Museum,+Leeds" target="_blank" rel="noopener">
    Open in Google Maps
  </a> · 12 Mill Lane, Leeds LS1 4DT
</p>

<!-- 2. click to load, so nothing third-party runs until the visitor asks -->
<h3>Consent-friendly version</h3>
<div class="map facade" id="map2"
     data-src="https://www.google.com/maps?q=Leeds+City+Museum,+Leeds&output=embed"
     data-title="Map showing Leeds City Museum, Millennium Square, Leeds">
  <button type="button" class="load">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/>
    </svg>
    <strong>Show the map</strong>
    <span>Loads Google Maps, which sets cookies.</span>
  </button>
</div>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; background: #f6f8fb; padding: 22px; }

h3 { font-size: 1rem; color: #16202e; margin: 26px 0 10px; }

/* ============ the whole responsive technique ============ */
.map {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #e6ebf2;
  border: 1px solid #e2e7ef;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* ========================================================= */

.under { font-size: .85rem; color: #8593ab; margin-top: 10px; }
.under a { color: #3b4fe4; }

/* ---- click-to-load facade ---- */
.facade .load {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  font: inherit;
  border: 0;
  cursor: pointer;
  padding: 20px;
  text-align: center;
  color: #5b6b83;
  /* a cheap abstract stand-in for the map, so the space is not just grey */
  background:
    linear-gradient(#dfe6ef 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, #dfe6ef 1px, transparent 1px) 0 0 / 26px 100%,
    #eef2f7;
}

.facade .load:hover { color: #16202e; }
.facade .load:focus-visible { outline: 2px solid #3b4fe4; outline-offset: -4px; }

.facade svg {
  width: 30px; height: 30px;
  fill: none; stroke: #3b4fe4; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 6px;
}

.facade strong { font-size: .98rem; color: #16202e; }
.facade span { font-size: .82rem; max-width: 28ch; }

@media (max-width: 560px) {
  .map { aspect-ratio: 4 / 3; }
}

// Swap the placeholder for the real iframe only when the visitor asks for it.
document.querySelectorAll(".facade").forEach((box) => {
  box.querySelector(".load").addEventListener("click", () => {
    const frame = document.createElement("iframe");
    frame.src = box.dataset.src;
    frame.title = box.dataset.title;
    frame.loading = "lazy";
    frame.referrerPolicy = "no-referrer-when-downgrade";
    frame.allowFullscreen = true;
    box.replaceChildren(frame);
    frame.focus();
  });
});