CCS Drupal Guide
  • Introduction
  • Drupal Platform Introduction
  • Drupal User Roles & Responsibilities
  • Workbench Moderation
  • Drupal Websites: Getting Started
    • Drupal Text (WYSIWYG) Editor
    • Taxonomies
  • Managing Menus
    • Sidebar Menus
  • Best Practice Tips
  • UG Drupal Content Types
    • Banners
    • Book
    • Course Outlines
    • Events
    • FAQ
    • Featured Item
    • News
    • Page
    • People Profiles
    • Service
    • Social Media Account
      • Live Feeds
    • Webform
  • Accessible Content Guide
    • Accessibility Basics
      • Accessibility First Content Development
      • HALT: Accessibility with the Drupal Text Editor
      • Accessible Design Intro
    • Content Titles & Headings
    • Links
    • Colour
    • Documents
    • Images
    • Tables
    • Lists
    • Audio & Video
    • Other Accessible Content
  • Advanced Topics on Drupal Websites
    • Blocks
    • Collapsible Sections / Accordions
    • Categorizing and Displaying Profiles
    • Headings that Expand and Collapse
    • Tabs
    • Customizing Content Layout
    • Mini Panel
    • Google Maps
    • Google reCAPTCHA
    • Bootstrap: Typography
  • SiteImprove
  • Google Analytics
  • Style Guide Code Snippets
  • Home Page Layout Options
  • Home Page Layout Tutorials
  • Content Type View Panes
    • Course Outline Panes
    • Event Panes
    • FAQ Panes
    • Feature Panes
    • News Panes
    • Social Media/Feeds
    • Service Panes
    • People profiles
  • Customizing Site Search
  • Client FAQ
Powered by GitBook
On this page

Was this helpful?

  1. Advanced Topics on Drupal Websites

Google Maps

PreviousMini PanelNextGoogle reCAPTCHA

Last updated 6 years ago

Was this helpful?

In order to put an embedded Google map into your website, you must ensure the following:

  • The map does not create a keyboard trap, i.e. the user is able to exit the map using only keyboard controls.

  • The map has a title attribute.

  • There is descriptive text before/after the map that details the important information relayed in the map.

    Avoiding Keyboard Traps

    To determine if your map has created a keyboard trap, you must test the map. This can be done by pressing the tab button on your keyboard and watching tab focus go down the page. If you are able to tab out of the map, the map is not a keyboard trap.

    Google Map Text Alternatives

    Along with the map, there should be explanations of the key points the map is trying to relay.

    General Use Cases for an Embedded Google Map:

  • Location/directions to a building: Provide routes from a couple key landmarks/intersections in the area.

  • Location of booths around campus: Provide a chart with the booth names and relative locations.

    How to Embed a Google Map

  • Using Google Maps, navigate to the location you would like to embed.

  • Click Share on the side menu.

  • Click the Embed Map tab.

  • Copy the given code and paste it into the plain text editor on the website. Click Switch to plain text editor and navigate to the part of the page you would like to place the map.

  • In the code that you just pasted, locate the <iframe> tag and put a title attribute inside it.

    Eg: <iframe title="Title of Map" ... >

  • Below or Above the map, include appropriate text alternative for the key bits of information the map should relay to the user using the above guidelines.

Click Plain Text Option