Google Maps Embed and GDPR: Three Compliant Solutions

A Google Maps embed is one of the most common features on business websites, and one of the most overlooked GDPR risks. A contact page with "find us on the map" sounds harmless. But the standard <iframe> embed sends every visitor's IP address to Google's servers the moment the page loads, before any consent is obtained.

This article explains why that is a problem and provides three practical solutions that are compliant without requiring a cookie banner.

Why the Standard Google Maps Embed Is a Problem

When a browser loads a page containing <iframe src="https://www.google.com/maps/embed?...">, it makes a direct HTTP request to maps.google.com. That request automatically includes:

• The visitor's IP address
• Browser headers (User-Agent, Accept-Language)
• The referring page URL

Google receives this data regardless of whether the visitor interacts with the map. The IP address is classified as personal data under GDPR Article 4(1). Sending it to Google without consent lacks a valid legal basis for most websites.

This is not a theoretical risk. The same legal logic that made external Google Fonts controversial (confirmed unlawful by the Landgericht München I in January 2022, case 3 O 17493/20, for IP address transfer without consent) applies to Google Maps embeds. The German court's ruling in the Fonts case turned specifically on IP address transfer to Google without consent or legitimate interest, and Maps creates the same transfer. The Dutch Autoriteit Persoonsgegevens treats unconsented IP transfers to third-party services the same way, and its broader cookies and tracking guidance applies to any third-party script that contacts an external server before consent. The pattern is identical for Google Fonts and YouTube embeds.

Of the 499 Dutch Restaurant Websites We Scanned

45.9% embedded Google Maps without a consent mechanism, meaning nearly half sent every visitor's IP address to Google on every page load, with no banner, no consent, no legal basis.

Solution 1: Static Map Image with a Link (Simplest)

Replace the embedded map with a screenshot image of the map showing your location, with a clickable link to Google Maps.

Implementation:

1. Go to Google Maps and navigate to your address
2. Take a screenshot of the map at the zoom level that makes your location clear
3. Add a marker annotation if needed (in Photoshop, GIMP, or even Google Slides)
4. Place the image on your website with descriptive alt text: alt="Map showing our location at [address], Amsterdam"
5. Wrap the image in a link to https://maps.google.com/?q=[your address]

HTML example:

<a href="https://maps.google.com/?q=Keizersgracht+123+Amsterdam" 
   target="_blank" 
   rel="noopener noreferrer">
  <img src="/images/location-map.png" 
       alt="Map showing our location at Keizersgracht 123, Amsterdam. Click to open in Google Maps."
       width="600" 
       height="400">
</a>

Advantages:

• No GDPR issue, no external request on page load
• Faster page load (no JavaScript from Google)
• No cookie banner required
• Works even if the user has JavaScript disabled

Disadvantages:

• Map is static, does not update if street view changes
• Does not provide interactive navigation within the page

This is the recommended solution for most small business contact pages.

Solution 2: Lazy-Load Google Maps with Consent (Most Interactive)

Show a placeholder or static image initially. Only load the actual Google Maps iframe when the visitor explicitly clicks to load the map.

Implementation:

Replace the <iframe> with a placeholder div that triggers the actual map on click.

<div id="map-container" style="position:relative; width:600px; height:400px; cursor:pointer;"
     onclick="loadMap(this)">
  <img src="/images/map-placeholder.png" 
       alt="Map of our location, click to load interactive map"
       style="width:100%; height:100%; object-fit:cover;">
  <div style="position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
              background:#1a73e8; color:white; padding:8px 16px; border-radius:4px; 
              font-family:sans-serif; font-size:14px;">
    Click to load map
  </div>
</div>

<script>
function loadMap(container) {
  const iframe = document.createElement('iframe');
  iframe.src = 'https://www.google.com/maps/embed?pb=YOUR_EMBED_URL_HERE';
  iframe.style.width = '100%';
  iframe.style.height = '100%';
  iframe.style.border = '0';
  iframe.allowFullscreen = true;
  iframe.loading = 'lazy';
  container.replaceWith(iframe);
}
</script>

Advantages:

• Full interactive Google Maps experience for users who want it
• No IP address transfer unless the user actively clicks to load
• No cookie banner required, the user's click is an affirmative action analogous to consent for this specific purpose

Disadvantages:

• Requires custom HTML/JavaScript, not a simple plugin setting
• Some legal ambiguity: is a "click to load" an equivalent to a formal consent banner? For most interpretations yes, but it is not identical to a documented cookie consent event.

If you use this approach, consider also noting in your privacy policy that Google Maps is loaded on demand and explain what data is sent when loaded.

Solution 3: OpenStreetMap (No Google Dependency)

Use OpenStreetMap (OSM) data with a self-hosted or privacy-respecting tile server instead of Google Maps.

Option A: Static link to OpenStreetMap

Like Solution 1, but link to OpenStreetMap instead of Google Maps:

<a href="https://www.openstreetmap.org/?mlat=52.3676&mlon=4.9041&zoom=16"
   target="_blank"
   rel="noopener noreferrer">
  <img src="/images/map-static.png" 
       alt="Map showing our location. Click to open in OpenStreetMap.">
</a>

Option B: Embed Leaflet.js with a privacy-respecting tile server

Leaflet.js is an open-source JavaScript mapping library. You can host it yourself and configure it to use tile servers that do not track users.

Privacy-respecting tile providers:

• Thunderforest (EU-based), requires free registration, privacy policy available
• Mapbox, US-based, has its own privacy implications, check their DPA
• Self-hosted tiles via maptiler, full control, no third-party data transfer

For most small business contact pages, Option A (static image with OpenStreetMap link) is simpler than setting up Leaflet.js and is fully compliant.

Which Solution Should You Use?

If You Already Have a Cookie Banner

If your website has a compliant cookie banner that blocks third-party scripts before consent, the Google Maps embed can be conditionally loaded, show the static placeholder before consent, and enable the iframe after the visitor accepts the relevant cookie category.

Most CMP (Consent Management Platform) solutions support conditional loading of specific embeds. Configure Google Maps as a third-party that requires consent (alongside analytics and advertising cookies).

Checking Your Current Setup

To see whether your Google Maps embed loads before or after consent:

1. Open your website in an incognito window
2. Open developer tools (F12) → Network tab
3. Load the page before clicking anything on the cookie banner
4. Filter the network requests for "google.com" or "maps.googleapis.com"
5. If any requests appear before you interact with the banner, the map is loading without consent

For a full audit of third-party requests on your website, scan your website free.

---

This article is technical analysis, not legal advice. Consult a lawyer for advice specific to your situation.