Digital pattern library

Google Maps

The Google Maps pattern uses a modified iframe embed code from Google, wrapped within a div with specific classes to ensure that it works as expected on mobile devices.

Rules for Google Maps

An embedded Google Map may be used only within these three layout patterns:

Options available

The Google Maps pattern has two main variants: multiple-point and single-point maps.

Multiple-point maps

Multiple-point maps must be created using Google My Maps; this requires a Google account. See My Maps help for more information.

Single-point maps

Single-point maps use standard Google Maps; this does not require a Google account.

Embedded map code wrapper

To ensure that the maps are responsive and work on all sizes of devices, use the following code:



Multiple-point map (content whole)

Created using My Maps, within the content whole pattern.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.


Multiple-point map (content thirds)

Created using My Maps, of University of St Andrews halls of residence, within the content thirds pattern.

Related content

  • Item 1
  • Item 2
  • Item 3
Code

Related content

  • Item 1
  • Item 2
  • Item 3

Single-point map (content whole)

Created using Google Maps, within the content thirds pattern.

Related content

  • Item 1
  • Item 2
  • Item 3
Code

Related content

  • Item 1
  • Item 2
  • Item 3

Single-point map (content halves)

Created using Google Maps, within the content halves pattern.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.

Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor.

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor. Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam.

Fusce at porta lorem, eget porta libero. Ut vitae odio id lacus faucibus ornare at vitae orci. Sed lacus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices eu elit id tempor.