Maps
It’s possible to embed a map with one or more place markers on a page. These are used for things such as showing an office location at different campuses. We used to use Google Maps (and still do for the campus maps), but due to view limits, we’ve switched over to using OpenStreetMaps.
Styling
Embedded maps, in most cases, look just like they do on OpenStreetMaps (similar to Google Maps).
Responsive behavior
Embedded maps shrink or expand with the window size. They also use a responsive touch feature:
- Use two fingers to move the map.
- Use one finger to move the page (scroll).
Development info
- Stylesheet location:
/_source/styles/components/_maps.scss
- In WordPress, use the placemarks shortcode – you’ll also need to activate the Placemarks plugin for the site.
- We’re phasing out embedding maps on plain HTML pages.
Map examples
Campus maps
We also have a custom individual campus map style on the location pages.
Accessible features maps
This map style can also be used for other maps, like the emergency phone maps.