Free tool

Google Maps that load on a click.

Paste the embed code from Google Maps or OpenStreetMap. You get a placeholder with your address, a line that says where the map comes from, a Load map button and a plain link. Nothing loads from Google until a visitor clicks.

In Google Maps: Share, then Embed a map, then Copy HTML. In OpenStreetMap: Share, then HTML. The address on its own works too.

Shown on the placeholder, so visitors see where it is without loading the map.

Your code

Copy, paste, done.

Without a map, the code below shows YOUR_MAP where your map goes. Paste the embed code above and it fills in by itself.

Preview

Like the code on your site, this preview loads nothing until you click Load map. Then the map loads from Google or OpenStreetMap.

The map loads from Google Maps. When you load it, Google receives your IP address and details about your browser.

Click to load

Paste it where the map goes. With several maps on one page, the script and the style block are needed once. Without JavaScript the link still works.

<!-- Click to load: nothing loads from Google Maps until a visitor clicks. Nothing is stored either: each map waits for its own click. -->
<div class="ctl-map" data-ctl-map-src="https://www.google.com/maps/embed?pb=YOUR_MAP" data-ctl-map-title="Map from Google Maps">
  <div class="ctl-map-box">
    <p class="ctl-map-note">The map loads from Google Maps. When you load it, Google receives your IP address and details about your browser.</p>
    <button type="button" class="ctl-map-button">Load map</button>
  </div>
  <p class="ctl-map-link"><a href="https://www.google.com/maps">Open in Google Maps</a></p>
</div>

<!-- Once per page. With a strict Content-Security-Policy, move this script into your own JS file. -->
<script>
  document.querySelectorAll(".ctl-map").forEach(function (map) {
    if (map.dataset.ctlReady) return;
    map.dataset.ctlReady = "1";
    var box = map.querySelector(".ctl-map-box");
    var button = map.querySelector(".ctl-map-button");
    var src = map.dataset.ctlMapSrc || "";
    if (!box || !button || !/^https:\/\/(www\.google\.com\/maps\/embed|www\.openstreetmap\.org\/export\/embed)/.test(src)) return;
    button.addEventListener("click", function () {
      var frame = document.createElement("iframe");
      frame.src = src;
      frame.title = map.dataset.ctlMapTitle || "Map";
      frame.className = "ctl-map-frame";
      frame.allowFullscreen = true;
      frame.referrerPolicy = "strict-origin-when-cross-origin";
      box.replaceWith(frame);
      frame.focus();
    });
  });
</script>

<!-- Once per page. Change the colours to match your site. -->
<style>
  .ctl-map { max-width: 100%; }
  .ctl-map-box, .ctl-map-frame { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 12px; }
  .ctl-map-box { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 24px; background: #e9ece4 repeating-linear-gradient(45deg, transparent 0 22px, rgba(0, 0, 0, 0.04) 22px 24px); color: #16130f; }
  .ctl-map-label { margin: 0; font-weight: 700; font-size: 1.1em; }
  .ctl-map-note { margin: 0; max-width: 34em; font-size: 0.9em; }
  .ctl-map-button { padding: 10px 20px; border: 2px solid #16130f; border-radius: 999px; background: #16130f; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
  .ctl-map-button:hover { background: #fff; color: #16130f; }
  .ctl-map-button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }
  .ctl-map-link { margin: 8px 0 0; font-size: 0.9em; }
  @media (prefers-reduced-motion: no-preference) {
    .ctl-map-button { transition: background-color 0.15s, color 0.15s; }
    .ctl-map-frame { animation: ctl-map-in 0.3s ease-out; }
    @keyframes ctl-map-in { from { opacity: 0; } to { opacity: 1; } }
  }
</style>
Why

A map that waits for a click

A Google Maps embed is an iframe that loads with your page. Before anyone looks at the map, the visitor’s browser fetches the map page, its scripts and the map images from Google’s servers. Each of those requests carries the visitor’s IP address and details about their browser. The referrer policy in Google’s own embed code also tells Google which site the map is on: your domain, without the path of the page.

If the browser already holds cookies for google.com, it can send them along, depending on its privacy settings. Google describes in general terms what it does with information from sites that use its services. We found no list from Google of the cookies an embedded map sets.

Two rules meet here. The ePrivacy Directive asks for consent before anything is stored on a visitor’s device or read from it, unless that’s strictly necessary for a service the visitor asked for. The GDPR names IP addresses among the online identifiers that can identify people, so passing them to another company needs a legal basis. A map that loads before anyone asked for it is hard to call strictly necessary.

How the placeholder works

The code from this tool puts a placeholder where the iframe was: your address as text, one line that says where the map comes from and what that company receives, a Load map button and a plain link to the map. Nothing on it loads from Google. On a contact page, the address and the link are often all a visitor needs.

When someone clicks the button, a few lines of script swap the placeholder for the map, with the address Google gave you and the referrer policy Google recommends, and move the focus to the map. The code stores nothing, so it needs no consent of its own, and every map on a page waits for its own click. Paste it twice and the second copy works too. The fade-in stays off for visitors who ask their system for reduced motion.

OpenStreetMap works the same way. Its map comes from the OpenStreetMap Foundation, whose privacy policy says it collects the IP address, browser and device type, the referring page and the time of each visit when people use its map. A different organisation, the same question, the same placeholder.

Whether a click on a placeholder counts as consent is a legal question, and this page is general information, not legal advice. What the placeholder does settle is that nothing loads from Google or OpenStreetMap before a visitor asks. Gatelamp’sclick to load will do this for maps and videos in your site’s own style, and the guideEmbed videos that wait for a click covers YouTube and Vimeo.

Sources

Checked on 28 October 2026.

Map embeds: common questions

Does an embedded Google Map need consent?
It can. A standard embed loads from Google as the page opens, so each visitor’s IP address and browser details reach Google before they’ve done anything, and Google decides what the map stores on the device. Whether that needs consent depends on your setup and your country. A map that waits for a click avoids the question until the visitor chooses. This is general information, not legal advice.
Does the code remember that a visitor loaded a map?
No. Each map waits for its own click, and the code stores nothing in the browser, so it needs no consent of its own. The video embed generator on this site works the same way. On a site with a cookie banner, a setting for maps in the banner can load them all at once.
Is OpenStreetMap a privacy-friendly alternative?
It sends the data to a different organisation. The OpenStreetMap Foundation’s privacy policy says it collects the IP address, browser details and the referring page when people use its map, to run and secure its services. The visitor’s IP address still leaves your site, so the same placeholder works for OpenStreetMap too.
Which embed codes does it accept?
The HTML from Share, then Embed a map in Google Maps, for a place or for directions; addresses from Google’s Maps Embed API (www.google.com/maps/embed/v1/…); and the HTML from Share in OpenStreetMap. It reads only the address in src and rebuilds it, and leaves every other attribute out. Share links such as maps.app.goo.gl aren’t embed code, so it refuses them.
Does the code load anything from Gatelamp?
No. It’s plain HTML, a short script and a style block. It doesn’t link to gatelamp.com, and the code you paste stays in your browser.

General information about the rules, not legal advice. Embed code that doesn’t work? Tell us.

Read and use next

Where Gatelamp helps

Early access

Switch on early.

Join the waitlist for Gatelamp. We invite people in small groups, and waitlist members get the early price.