Google Maps

Embed an interactive Google Map so visitors can see a location directly on your page.

Syntax


::google-map src="EMBED_URL" title="Map title" height="400px"::

src — the embed URL from Google Maps (see below for how to get it)
title — a short description of the map (used for accessibility)
height — how tall the map should be (optional, defaults to 420px)

How to Get the Embed URL from Google Maps

Go to maps.google.com and search for the location you want to show.
Click Share (the share icon or the Share button in the sidebar).
In the Share dialog, click Embed a map.
Google will show you an HTML snippet like this: <iframe src="https://www.google.com/maps/embed?pb=..." ...></iframe>
Copy only the URL between the quotation marks after src=. That URL starts with https://www.google.com/maps/embed?...
Paste it as the value of src in the syntax above.

Examples

Basic map embed

Type this in Contentful:


::google-map src="https://www.google.com/maps/embed?pb=!1m18!1m12..." title="Our Office Location"::

What you’ll see: An interactive map showing the location, sized at the default height (420px). Visitors can scroll and zoom the map.

Map with custom height

Type this in Contentful:


::google-map src="https://www.google.com/maps/embed?pb=!1m18!1m12..." title="Event Venue" height="550px"::

What you’ll see: The same interactive map, but taller (550px).

Map on its own with a heading

Type this in Contentful:


## Find Us

We are located in the heart of downtown.

::google-map src="https://www.google.com/maps/embed?pb=!1m18!1m12..." title="Our location" height="400px"::

Street parking is available on Main Street.

What you’ll see: A heading, a line of text, the map, and a note below — all flowing naturally.

Options / Variations

Attribute	Required?	Example	Notes
`src`	Yes	`src="https://www.google.com/maps/embed?..."`	Must be a Google Maps embed URL
`title`	Recommended	`title="Our Office"`	Shown to screen readers
`height`	No	`height="500px"`	Defaults to 420px

Tips

The map fills the full width of the content area automatically.
Use a descriptive title — it helps visitors using screen readers understand what the map shows.

Common Mistakes

Using a regular Google Maps URL instead of the embed URL

Wrong: src="https://www.google.com/maps/place/Eiffel+Tower/@..." Right: src="https://www.google.com/maps/embed?pb=..."

The URL must be the embed URL (it contains /embed), not the regular maps URL. Follow the “Share → Embed a map” steps above.

Forgetting the opening and closing ::

Wrong: google-map src="..." title="..." or ::google-map src="..." (no closing ::) Right: ::google-map src="..." title="..." ::

The directive must start and end with ::.

Height without the px unit

Wrong: height="500" Right: height="500px"

Include the unit (px) when specifying a height.