Customising embeds

You want to embed a map? That's great! Here are some tips.

Avoid high traffic

As tempting as it may be, avoid embedding maps in pages that get a lot of traffic. We sometimes see maps embedded in a tab on a site home page. The map loads every time the page loads, but hardly anybody ever looks at it because it's hidden in a tab. It just slows your page down, and increases the size of download - both harm your Search Engine Optimisation score. We ask that you avoid doing this, and instead provide a link to the map.

The default map

When you embed a map, it comes with preset parameters. If you simply copy and paste the embed code, it will look like this example.

Customised view

You can customise the map view by adding extra parameters to the src attribute of the code. The 'src' attribute already has a query string to define the embed design: ?SQ_DESIGN_NAME=embed. You simply add the extra parameters to the end.

  • &zoom=14 adjusts the zoom level of the map.
  • &bearing=150 adjusts the rotation of the map in degrees from zero (north).
  • &pitch=45 adjusts the pitch of the viewpoint in degrees from zero (vertical).
  • &borderwidth=0 adjusts the thickness (in pixels) of the border surrounding the map.
  • &margin=0 removes the small white amount of space around the map.
  • &plain=1 removes the heading and text above and below the map. Default is empty, or 0.

That example is customised with the values above, so the full src attribute is:
https://maps.unimelb.edu.au/parkville/building/104?SQ_DESIGN_NAME=embed&zoom=14&bearing=150&pitch=45&borderwidth=0&margin=0&plain=1

Height

Height is a little trickier, because there are two parameters that need to be changed. The height of the iframe itself is, by default 450 pixels. You can see it in the code: height='450'. But changing that only changes the space the iframe takes up, not the map itself.

The map usually needs to be 100 pixels smaller than the iframe to accommodate the labels. If you don't use labels, you can get away with just 20 pixels smaller.

This final example is the default map with just the height slightly reduced. To illustrate, a dotted border has been added to the iframe. The iframe has been set to height='400', and the map itself adjusted by adding &height=300.