Map embed

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Designer Guidance

When to use

Use a map on a web page when you need to:

• To show a physical location or provide directions.
• To enhance a contact page or visualise geographically relevant information.

When not to use

Avoid using a map embed in the following situations:

• For complex interactive experiences, use a static map for better accessibility. 
• If the page does not reference a location in its content. 

How to use

• The map embed component can be used in a single column layout or a two column layout. 
• In two-column layouts, the map can be used on either side.
• Provide clear context for the maps purpose.
• Do not change the link area background colour.
• Optional: Include a link to Google Maps for external navigation.

Behaviour


• “View on Google Maps” link opens in a new window.
• Aspect ratios:
  • Single column: 3:2 (mobile), 4:3 (tablet), 16:9 (desktop).
  • Two column: 3:2 (mobile), 16:9 (tablet and desktop)
• Maps scales responsively across breakpoints.

Developer Guidance

Best practices

• Enable the external link is keyboard accessible and has visible focus.
• Ensure proper focus order.
• Ensure screen readers can interpret structure, behaviour and state correctly.

Content Editor Guidance

Best practices

• Always include the full postal address in text outside the map.
• Add a link to Google Maps for users who prefer external navigation.
• Do not rely on the map alone, provide written directions if relevant.
• Keep headings clear and descriptive (e.g., “Find us at…”).

For detailed guidance for using this component visit the content example site.

Accessibility

Make maps optional and supplemental to a clear text address and directions. Ensure keyboard access, visible focus, sufficient contrast, and touch-friendly targets.

WCAG Success Criteria

• 1.1.1 Non-text Content (Level A)
  Provide a text alternative for the map’s purpose and location (full postal address, key directions).
• 1.4.3 Contrast (Level AA)
  Ensure link and text contrast meets minimum requirements.
• 1.4.10 Reflow (Level AA)
  Map and layout adapt to screen size.
• 2.1.1 Keyboard (Level A)
  All map controls must be operable via keyboard. 

Related components

Link