Skip to content
Start for free

Google Maps

Show a Google Maps embed only to visitors who allow its category. Until then, the page has no map iframe, so the browser does not connect to Google.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

Start for free
pnpm add c15t
Google MapsWaiting for consent
Before a choice

The page has no map iframe, and no request goes to Google Maps.

Turn the switch on, then off, to see what loads.

Before you start

You need an Inth project that connects to your app and c15t in that app, with its consent provider in place. You also need the iframe embed URL of your map.

c15t has no Google Maps helper. This guide wraps the map iframe in the c15t ConsentGate component.

Open the Next.js quickstart

How consent works with Google Maps

The ConsentGate component renders the map iframe only while its category has permission. This example uses functionality, but you can pick another category.

Before that, the page has no iframe with a Google Maps URL. So the browser makes no request to Google.

On withdrawal, ConsentGate removes the iframe and the map with it.

Keep the address and a directions link outside the gate, so every visitor can still find you.

Installation

Google Maps has one load mode in c15t. ConsentGate waits for permission for the category that you choose.

Wait for permission. The map iframe mounts only after the visitor accepts its category. On withdrawal, ConsentGate removes it.

<ConsentGate category={embedCategory}>

An opt-out policy or no policy gives optional categories permission before a choice. Then the map shows on the first page. This guide uses an opt-in policy.

Setup steps

  1. Add the embed configuration

    Paste the complete embed URL of your map in place of the example. Choose the category that matches how your site uses the map.

    src/embed-config.ts
    export const embedCategory = 'functionality' as const;
export const embedURL =
	'https://www.google.com/maps/embed?pb=YOUR_EMBED_PARAMETERS';
export const embedTitle = 'Map showing our office location';
export const embedAspectRatio = '4 / 3';

    Keep the address and a directions link outside the consent gate.

  2. Wrap the iframe in ConsentGate

    Render this component inside your existing consent provider. It does not create a second provider, so keep your Inth endpoint, mode, policy, styles and consent UI.

    src/consent-embed.tsx
    'use client';

import { ConsentGate } from 'c15t/next';
import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';

export function ConsentEmbed() {
  return (
    <ConsentGate category={embedCategory}>
      <iframe
        src={embedURL}
        title={embedTitle}
        loading="lazy"
        allowFullScreen
        style={{ width: '100%', aspectRatio: embedAspectRatio, minHeight: 200, border: 0 }}
      />
    </ConsentGate>
  );
}

    ConsentGate keeps the iframe out of the page until the visitor gives permission, and removes it on withdrawal. The lazy attribute only delays an allowed iframe. It is no consent gate.

  1. Add the embed configuration

    Paste the complete embed URL of your map in place of the example. Choose the category that matches how your site uses the map.

    src/embed-config.ts
    export const embedCategory = 'functionality' as const;
export const embedURL =
	'https://www.google.com/maps/embed?pb=YOUR_EMBED_PARAMETERS';
export const embedTitle = 'Map showing our office location';
export const embedAspectRatio = '4 / 3';

    Keep the address and a directions link outside the consent gate.

  2. Wrap the iframe in ConsentGate

    Render this component inside your existing consent provider. It does not create a second provider, so keep your Inth endpoint, mode, policy, styles and consent UI.

    src/consent-embed.tsx
    import { ConsentGate } from 'c15t/react';
import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';

export function ConsentEmbed() {
  return (
    <ConsentGate category={embedCategory}>
      <iframe
        src={embedURL}
        title={embedTitle}
        loading="lazy"
        allowFullScreen
        style={{ width: '100%', aspectRatio: embedAspectRatio, minHeight: 200, border: 0 }}
      />
    </ConsentGate>
  );
}

    ConsentGate keeps the iframe out of the page until the visitor gives permission, and removes it on withdrawal. The lazy attribute only delays an allowed iframe. It is no consent gate.

All frameworks

This recipe covers an iframe embed. For the Maps JavaScript SDK, register a category-gated script and handle the widget cleanup yourself.

Verify your setup

Use a fresh opt-in session. Filter DevTools Network by google.com/maps. Then test the three states.

  • Before a choice

    The page has no map iframe, and no request goes to Google Maps.

  • After you allow the category

    The map iframe mounts and loads your map.

  • After you withdraw the category

    ConsentGate removes the iframe. The address and directions link stay on the page.

A pass here proves nothing for a Maps SDK that loads on its own. Test that SDK separately.

Open the full Google Maps guide