Content module

Google Maps block

A Google Map for any address — no API key needed — with an optional info card, directions link, grayscale style and click-to-load privacy mode.

Overview

The Google Maps block embeds an interactive map for an address, place name or coordinates, without setting up a Google API key. It can show an info card with your address and a “Get directions” link, use a muted grayscale style, have a different height on phones, and — for privacy laws such as GDPR — wait until the visitor clicks before contacting Google.

At a glance

Block name: wpbb/google-maps
Module: Content
Find it by searching: Google Maps
Loads JavaScript on the site: A tiny script is loaded with the block; it only does something when “Load map on click” is on

When and why to use it

Show where your business is.
Venue maps for events.
Privacy-friendly maps that need visitor consent.

Example scenarios

Contact page: the office address with the info card (“Visit us”, opening hours) and “Get directions”.
EU website: “Load map on click” on, so no data goes to Google until the visitor agrees.

How to add the Google Maps block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Google Maps in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Google Maps in the results. The block appears with a sample map of the Eiffel Tower.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Card titleShown when Show info card is on

What it does: The title of the info card over the map.
What to enter or choose: A short title.
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
Example: “Visit us”.
Result: Shown at the top of the card; empty titles are hidden.

Card textShown when Show info card is on

What it does: The card text — address, opening hours…
What to enter or choose: A few lines. Bold, italic and line breaks are allowed.
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
Example: “12 Rua Augusta, Lisbon
Mon–Fri 9:00–18:00”.
Result: Shown in the card. When empty, the address is shown.

Settings panel: Location

Address or place

What it does: What the map shows.
What to enter or choose: A street address, place name or “lat,lng” coordinates.
Default: Eiffel Tower, Paris
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Always.
Example: “10 Downing Street, London” or “38.7223,-9.1393”.
Result: The map centres on it with a marker.
Good to know: If empty, the block shows nothing on the site.

Zoom

What it does: How close the map is.
What to enter or choose: A number from 1 to 21.
Default: 14
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: 3–5 for a country, 10–12 for a city, 14–16 for a street, 18+ for a building.
Example: 15.
Result: The map zooms in or out.

Map type

What it does: Street map or satellite photos.
What to enter or choose: One of: Map, Satellite.
Default: Map
How to use it: Click one of the buttons in the group.
Example: Satellite for a rural venue.
Result: The map imagery changes.

Accessible title

What it does: Describes the map for screen-reader users.
What to enter or choose: A short description.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
Example: “Map of our Lisbon office”.
Result: Used as the map frame’s title. Defaults to the address.

Settings panel: Size & style

Height (px)Desktop and tablet

What it does: The map height.
What to enter or choose: A number from 160 to 900 (px), in steps of 10.
Default: 420 px
How to use it: Drag the slider, or type a number in the box next to it.
Example: 420.
Result: The map gets taller or shorter.

Mobile height (px, 0 = same)Mobile

What it does: A different height on phones (below 600px).
What to enter or choose: A number from 0 to 900 (px), in steps of 10.
Default: 0 px
How to use it: Drag the slider, or type a number in the box next to it.
Example: 300.
Result: 0 keeps the desktop height.

Grayscale map

What it does: Shows the map in shades of grey.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For a muted map that lets your brand colours stand out.
Example: On for a minimal design.
Result: The map loses its colours.

Rounded corners

What it does: Rounds the map corners.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
Example: On.
Result: Corners change.

Settings panel: Info card

Show info card

What it does: Places a card with a pin icon, title and text over the map (below it on phones).
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: To show your address and opening hours next to the map.
Example: On for a contact page.
Result: The card appears; edit its title and text on the block.

Show "Get directions" linkShown when the info card is shown

What it does: Adds a link that opens Google Maps directions to the address.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
Example: On.
Result: A “Get directions” link appears in the card; it opens in a new tab.

Settings panel: Privacy & performance

Load map on click

What it does: Shows a placeholder and contacts Google only when the visitor asks for the map.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For GDPR consent, and to speed up pages where the map is below the fold.
Example: On for EU visitors.
Result: Visitors see “This map is provided by Google. Loading it shares your IP address with Google.” and a Show map button.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Google Maps offers.

Element: Map selected first

The map frame — border, corners, shadow.

Styles-tab controls for “Map”
Panel	Control	Per device	Available in states
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal

States: Normal only.

Element: Block

The wrapper (spacing, size, position, visibility).

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Spacing	Margin	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Effects	State transition (ms)	—	Normal
Effects	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Info card

The info card.

Styles-tab controls for “Info card”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal

States: Normal only.

Element: Directions link

The “Get directions” link.

Styles-tab controls for “Directions link”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover
Colors	Text	—	Normal, Hover

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

Use Mobile height for a shorter map on phones. On phones the info card sits below the map instead of over it.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Margin, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Font size, Line height, Letter spacing, Alignment, Padding, Opacity (%).

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

A Google Maps embed (iframe, loaded lazily). With “Load map on click”, a tiny script loads it after the click; without JavaScript the Show map button opens the map on Google Maps instead.

Accessibility

Set an Accessible title.
Also write the address as text (for example in the info card) — the map itself is hard to use with a screen reader.

Limitations and notes

The map comes from Google; its look can only be changed as a whole (grayscale).
Loading the map shares the visitor’s IP address with Google — see External services.