Embedding campus maps

A campus map can be embedded in pages on your website, highlighting a building. The embedded map will link to the main campus map website, showing the building on a larger map.

To embed a map for a building number, use the following code, substituting in the building number you want to display (in this example, we are displaying building 42). There are two methods available - they are both valid, but one may be easier to implement in your CMS than the other. Use the one that works best for your situation. The Javascript method will be slightly faster to load.

The embedded map will be a maximum of 600x400 pixels, and will appear smaller depending on the grid class it is put in. It is best to put the embedded map in one of the smaller grid classes, such as wide, narrow or one-third. Remember that the map will change size on different screen sizes, so test your embedded map on small and large screens.

Embed as an iframe:

<iframe class="anu-map" scrolling="no" src="//www.anu.edu.au/anu-campus-map/embed/42" frameborder="0" title="Location map for building 42">
<p>Location map for <a href="//www.anu.edu.au/maps/building/42">building 42</a></p>
</iframe>
               

Note: the iframe title and the link to the location map are accessibility requirements. The link to the location map will not display on your page unless the viewer cannot see the iframe.

Embed using javascript:

<div class="anu-map" id="map1"></div>
<script>$anujq("#map1").load("//www.anu.edu.au/anu-campus-map/embedjs/42");</script>

<noscript>
    <p>Location map for <a href="//www.anu.edu.au/maps/building/42">building 42</a></p>
</noscript>
 

Note: <noscript> is an accessibility requirement. The content in <noscript> will not display on your page unless the viewer has Javascript disabled.

Doublewide

Wide

Wide

Narrow

Doublenarrow

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle