Google Maps

The Google Maps pattern should be used to embed a Google Map using the responsive embed pattern and supported with accessible content.

Rules for Google Maps

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

Content whole
Content thirds
Content halves (single-point map only)

Accessibility

Embedded maps are not screen reader accessible so the following steps should be taken:

Include a suitable title attribute on the iframe.
If the map provides directions to a location then include text based directions alongside the map.
If the map includes multiple locations then these should be listed as text alongside the map.
The Google Maps application has better accessibility support than embedded maps so consider a promiment link to this.

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.

You must only embed multiple-point maps using content whole and content thirds patterns; you must not use the content halves pattern.
You may use whichever marker icons and colours are on offer (within reason), but custom icons must not be used.
Google Street View is not currently available using My Maps.

Single-point maps

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

Use the default settings when creating the map - there are no options to customise this map.
Single-point maps display only a red marker, with no supporting text or pop-up label.
Google Street View is currently only available using single-point maps, but only if the user clicks 'View larger map' to open the map in Google Maps.

Embedded map code wrapper

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

<div class="embed-responsive embed-responsive-16by9 google-map">
  <iframe src="IFRAME_SRC_URL" class="embed-responsive-item google-map" title="A suitable title for the map"></iframe>
</div>

You must replace IFRAME_SRC_URL with the URL from the embed code you copied from Google.
There must be a suitable title attribute included for accessibility.
You must not include any other attributes in the iframe element, e.g. width, height, frameborder, style, etc.

Multiple-point map (content whole)

Created using My Maps, within the content whole pattern.

Example

Text descriptions for all points on the map.

Code

<!-- Begin pattern: google-maps //-->
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="embed-responsive embed-responsive-16by9 google-map">
                <iframe title="Embedded Google map" src="https://www.google.com/maps/d/embed?mid=167xgAp5IMFyBUp46Vdbw6f21vc0" class="embed-responsive-item google-map"></iframe>
            </div>
            <p>Text descriptions for all points on the map.</p>
        </div>
    </div>
</div>
<!-- End pattern: google-maps //-->

Multiple-point map (content thirds)

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

Example

Text descriptions for all points on the map.

Accommodation

Single-point map (content whole)

Created using Google Maps, within the content thirds pattern.

Example

Text directions to the point on the map.

Accommodation

Single-point map (content halves)

Created using Google Maps, within the content halves pattern. This uses a 4:3 ratio to show a larger portion of the map given the reduced width.

Example

Text directions to the point on the map.

Code

<!-- Begin pattern: google-maps //-->
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="embed-responsive embed-responsive-4by3 google-map">
                <iframe title="Embedded Google map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2211.399529804193!2d-2.816029683587382!3d56.34019068071458!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x488657829e5cbb3f%3A0xc253a6b45fc4cc48!2sAgnes+Blackadder+Hall!5e0!3m2!1sen!2suk!4v1484316949822" class="embed-responsive-item"></iframe>
            </div>
            <p>Text directions to the point on the map.</p>
        </div>
        <div class="col-sm-6">

        </div>
    </div>
</div>
<!-- End pattern: google-maps //-->

Google Maps

Rules for Google Maps

Accessibility

Options available

Multiple-point maps

Single-point maps

Embedded map code wrapper

Multiple-point map (content whole)

Multiple-point map (content thirds)

Related content

Single-point map (content whole)

Related content

Single-point map (content halves)