University of St Andrews

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:

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

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)

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:

• 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.

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.
            
    

Multiple-point map (content thirds)

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

    

            

                

                    
                
            
            

                
                  
 
  
 
 
Accommodation
 
 
 
Related content
Item 1
Item 2
Item 3
            
        
    

Single-point map (content whole)

Created using Google Maps, within the content thirds pattern.

    

            

                

                    
                
            
            

                
                  
 
  
 
 
Accommodation
 
 
 
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.