Treating maps as media

Jan 19, 2014

Are we treating maps incorrectly?

We have all been there, we are sat in our quiet office, and follow a link to a site that has media elements playing on page load. Whether they are remnants of the past, playing 8-bit songs, or as often is my case, the Everton FC website, which plays video as soon as you reach the site.

Both of these examples break the heuristic User control and freedom by playing audio, or video on page load, and without the express permission of the visitor.

User control and freedom means “Don’t make videos play automatically when page loads”. Let the user play and pause video when they see as fit.

Although we are seeing this less and less, I have noticed that there is an indifference over another element, maps. Now I know that by definition <audio>, and <video> are specifically HTML5 elements, and there is not one for maps per se, nor am I suggesting that we need a specific element, although I will explore that hypothesis later. I do believe at the very least we should think about the usability of maps being on the same plain as <audio> and <video>.

To explain further, let us take a look at the <audio> element. You can set a number of default attributes, namely to show or hide controls, play or do not play audio in a loop, start the audio muted, or not, preloading, and finally whether to start the audio as soon as it is ready, or to wait until the user presses play.

With <video>, you have a few more options which relate to how the video is displayed, but all in all, you have the same functions as the <audio> element.

As more and more websites switch to HTML5 media players, and User Experience becomes more ingrained in organisations, then we will see more consistency with these elements on the web. Videos and audio will have controls to stop and start, and they will wait for the user to press play.

Although the web advertisement by Gordon’s gin didn’t play audio on default, which was a very good thing, the video playing automatically can still be a little on the annoying side. Although improved, hopefully this trend is not one to continue.

Where does this tie into maps? Well at present the way that you interact with maps on websites differs greatly. In some cases, where map navigation is the only requirement for the page, then loading all functionality on page load makes sense.

When maps take up a section of the page, then we need to be a lot smarter.

Map integration on websites

Below are four examples of how maps are being handled on various websites, Google Maps, Foursquare, Craigslist, and Historypin.

Google Maps

Google Maps is an example of a full screen website whose primary function is to display and navigate maps. Because of this, the user has no requirement to scroll to different areas of the page.

In the example video, I use the mouse wheel to zoom in and out of the map.


Foursquare is also a full screen website, who splits the page into two. One half of the screen is to show places, and the other half is to show the map.

Unlike Google Maps, the mouse wheel is used to move up and down the ‘places’ area of the page. To zoom in and out of the map area you must use the plus and minus buttons.

Both of the above options are well thought out, although they do require the user to learn both interfaces before being able to operate it.


This is where it starts to get messy.

Craigslist do have a map page, and you can navigate around it. The issue is that the embedded map does not take up the full screen. This means that functions, such as using the mouse wheel perform different actions if the point is outside of the map, than if it was inside of the map.

It is tricky to navigate to the footer area of the page. You need to keep the mouse pointer at the top of the page to ensure that you can use the mouse wheel to navigate around the page. If you are inside of the map then you perform zoom in and out functions.

If your pointer is inside of the map, and want to scroll back to the top of the page then you need to move your pointer outside of the area before you can use the mouse wheel to perform this action.


Historypin primarily has the same issues as with Craigslist. The notable difference being that Historypin have valuable content underneath the map.

This is very problematic.

Tto get to this area of the page by using the mouse wheel you need to first move to the far side of the page, and in the margin you are able to move the page up and down.

In these examples I have focussed on the action of using a mouse wheel - there are a number of other actions I could have focussed on, but this alone highlights some real issues with inconsistencies and considerations that should be made when integrating maps on a website.

What about mobile and tablet?

With touch devices ever on the increase, then map consistency is something that we should think about on mobile phones and tablets too.

If your finger actions moved the map, then how would you get to content underneath, like in the Historpin example?

There is the potential of coming across unusable websites, as you will have no means to reach the content.

The ‘on button’ hypothesis

One hypotheseis to consider would be to introduce an on button, something that the user is in control of, that they would activate to start the map functioning.

You would have a static image of a map, much like the <poster> attribute inside the <video> element.

The user would then press the on button to start interaction.

A suggestion to activate maps before use
The on button hypothesis

For Google Maps, which is a full screen map site, this interaction is not required. However, all other maps could benefit by having this on/off functionality. It would also ensure that the user becomes familiar with what to do when they encounter a map.

The <worldmap> hypothesis

A bigger question could be ‘are we treating maps correctly?’, if a map should be activated by the user as I suggest earlier, should this not mean we should tackle it the same way as we do <audio>and <video>?

With <map> already in use for image maps, we would need a smarter name, for the time being (and without much inspiration), I’ve gone with <worldmap>.

So what could you do with this element?

1 <worldmap width="100%" poster="/images/map.gif">
2 	<src="">
3 </worldmap>

Optional attributes could also be similar to the <audio>and <video> elements:

  • poster - This could be used to load a static image, which is only changed when the user hits the ‘on button’.
  • src - The URL of the map provider.
  • controls - True by default, could be set to 0 if there is a very good reason to do so.
  • allowfullscreen - Show/hide a button to allow the map to be full screen, or fit to the container.

Both suggestions would allow us to improve consistency and standards for maps. This would benefit the user, who would not need to learn what actions could be perfomed on an individual map, and it would also benefit developers, who would have better guidelines to follow to ensure greater usability in the future.