University of St Andrews

Google Maps

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

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

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

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 may only embed multiple-point maps using 'Content whole' and 'Content thirds' patterns; you may 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: there are no options to customise this map.
• Single-point maps display only a red marker, 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"></iframe>
</div>

• You must replace IFRAME_SRC_URL with the URL from the embed code you copied from Google.
• You must not include any other attributes in the iframe element, e.g. width, height, frameborder, style, etc.

Options available

• Multiple-point map (Content whole)
• Multiple-point map (Content thirds)
• Single-point map (Content whole)
• Single-point map (Content thirds)
• Single-point map (Content halves)

Multiple-point map (Content whole)

Created using My Maps, within the Content whole pattern.

<!-- 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 src="https://www.google.com/maps/d/embed?mid=167xgAp5IMFyBUp46Vdbw6f21vc0" class="embed-responsive-item google-map"></iframe>
                </div>
                <p>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.</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 two-thirds/one-third content pattern.

<!-- Begin pattern: google-maps //-->
<div class="container">
    <div class="row">
            <div class="col-sm-8">
                <div class="embed-responsive embed-responsive-16by9 google-map">
                    <iframe src="https://www.google.com/maps/d/embed?mid=167xgAp5IMFyBUp46Vdbw6f21vc0" class="embed-responsive-item"></iframe>
                </div>
            </div>
            <div class="col-sm-4">
                
                 <!-- Begin pattern: navbox //--> <div class="navbox big-target-click-zone"> <div class="navbox-image"> <img src="../../assets/docs/images/placeholders/360x240.jpg" alt="Description"> </div> <div class="navbox-title"> <p><a class="big-target-anchor" href="#">Accommodation</a></p> </div> </div> <!-- End pattern: navbox //--><h3>Related content</h3><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
            </div>        
    </div>
</div>
<!-- End pattern: google-maps //-->

Single-point map (Content whole)

Created using Google Maps, within the Content whole pattern.

<!-- 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 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 google-map"></iframe>
                </div>
                <p>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.</p>
            </div>
    </div>
</div>
<!-- End pattern: google-maps //-->

Single-point map (Content thirds)

Created using Google Maps, within the Content thirds pattern.

<!-- Begin pattern: google-maps //-->
<div class="container">
    <div class="row">
            <div class="col-sm-8">
                <div class="embed-responsive embed-responsive-16by9 google-map">
                    <iframe 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>
            </div>
            <div class="col-sm-4">
                
                 <!-- Begin pattern: navbox //--> <div class="navbox big-target-click-zone"> <div class="navbox-image"> <img src="../../assets/docs/images/placeholders/360x240.jpg" alt="Description"> </div> <div class="navbox-title"> <p><a class="big-target-anchor" href="#">Accommodation</a></p> </div> </div> <!-- End pattern: navbox //--><h3>Related content</h3><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
            </div>        
    </div>
</div>
<!-- End pattern: google-maps //-->

Single-point map (Content halves)

Created using Google Maps, within the Content halves pattern.

<!-- Begin pattern: google-maps //-->
<div class="container">
    <div class="row">
            <div class="col-sm-6">
                <div class="embed-responsive embed-responsive-16by9 google-map">
                    <iframe 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>
            </div>
            <div class="col-sm-6">
                <p>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.</p><p>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. </p>
                
            </div>        
    </div>
</div>
<!-- End pattern: google-maps //-->