Coming January 30, 2019: Boston University’s new, more mobile-friendly online campus map has been designed specifically for the Charles River, Medical, and Fenway Campuses and features plenty of engaging, easy-to-use functionality. This version will replace the previous online BU campus map.

BU Website Admins/Editors: You may begin updating links to the new map, and replace old embedded maps on web pages with the new embeds (see instructions below).

Map features include:

  • three-dimensional renderings of each campus
  • a more intelligent search function
  • 360-degree views of select campus locations
  • a filter accommodating multiple search factors
  • accessibility and safety locations such as curb cuts, lactation rooms, and emergency call boxes

Feedback

Feedback will help improve the accuracy of the map. We welcome suggested corrections and updates from users. Please share your thoughts or report errors.

LINKING to the new map

Websites linking to www.bu.edu/maps/ should update links. Visit maps.bu.edu to get your new link. Follow steps 1-3 of the embedding instructions below and copy the “Link to Location” URL. Links will have an entirely new URL.

For example, here are old/new links to the IT Help Center:
OLD map: https://www.bu.edu/maps/?id=225
NEW map: https://maps.bu.edu/?id=647#!m/288657

EMBEDDING the new map

Users can embed locations from BU Maps on other websites, including any website in BU WordPress.

1. Choose the location that you want to embed on your website by navigating the options in the left sidebar.

screen capture of online maps navigation menu

2. When you select a location a details box will appear on the map.

screen capture of maps interface with details box highlighted

3. Click the Share icon at the top of the details box. Share options will be displayed in the left sidebar. Copy the embed code by clicking the Copy Embed Code button. (Note: do this using a desktop computer – the embed code is not accessible on mobile devices).

screen capture of maps interface with share icon and embed code highlighted

4. Paste the embed code into the page on your website. If your website is a WordPress site, be sure to paste the code in the “Text” view of the content editor or in a field that accepts HTML. Adjust the height of the map in order for it to display properly in your website. In the embed code you pasted into the content editor, change the height to a fixed pixel size rather than a percentage. For example, height = “500”.

<iframe width="100%" height="100%" ...

change to

<iframe width="100%" height="500" ..

screen capture of HTML code inserted into WordPress editor

5. Save your changes and view the map on your site in a desktop web browser and on a mobile device. Adjust the height accordingly as needed to work well on both types of devices.

Hiding Header/Footer on Embedded Maps

For most users you may wish to hide map elements on your embedded map like the red header and the footer links at the bottom of the map embed. You can achieve this by adding some additional code to the URL of the map embed.

screen capture highlighting header and footer of embedded maps

In the embed code you pasted into the content editor, add &tbh&sbh after id=647 and before the # in the source URL.

screen capture of HTML code with added code highlighted

Other Custom Map Embed Options

Our vendor supports additional custom map embed options. You can learn more at Concept 3D documentation page.