University at Buffalo (UB)
Transforming UB’s digital communications.
Map (Google) Component
Embed an interactive Google map.
On this page:
Last reviewed: May 20, 2022
Using This Component
This component has only one tab.
Technical Restrictions
None.
Configure - Main Settings
Click the wrench icon to 'configure' these settings.
The component opened for editing.
Address: Enter the complete street address or GPS coordinates of a location to align the map; e.g. UB's North Campus is centered at 'Flint Entrance, Amherst, NY 14260' or GPS coordinates '43.001, -78.790'.
Map size: From the dropdown menu, select Large, Medium or Small.
Zoom level: From the dropdown menu, select a value. A lower Zoom level value shows more of the surrounding area.
How To Find UB Building Coordinates
1. Use UB's Google Map to search for campus buildings:
http://www.buffalo.edu/home/visiting-ub/CampusMaps/maps.html
2. In the floating sidekick, select the building you are seeking (e.g. Crofts Hall).
3. The map will then display your building, with a blue arrow icon.
4. Click the icon and a dialog box will appear.
5. At the top of the dialog box you will see GPS coordinates for that building.
The dialog box for Crofts Hall is shown, including its description and GPS coordinates.
UB's Interactive Map. Find a building in the Locations dropdown (e.g. Crofts Hall).
Accessibility Concerns
Authors are responsible for any third party content that is hosted or linked from their UBCMS pages.
This includes applications such as Formstack forms and Google Maps, that are displayed using their own component, as well as entries from UB's Calendar of Events, and external content hosted using HTML Snippet or External Embed.
Best practice: for Formstack forms, avoid using the date picker and the 'other' option in dropdowns.
Best practice: for the HTML Snippet and External Embed, always run an accessibility test (e.g. using a browser extension), check its behavior in mobile, and consider how it may impact page performance in general.
Best practice: if your code relies on a 'div' or iframe to house its content on your page, it must have an identifying label, often coded as a 'aria-label' or sometimes a 'title', that assistive technology can see. Formstack produces a title automatically, although it is poorly worded, but other applications tend to skip this requirement so it must be added manually on your end.
If you have concerns that external vendor content is not accessible, please contact UB's Web Accessibility officer.
Additional Reference:
See an Example
Example of a Map Component (not interactive).