The Patterns II: Web with Added Map

This is part 2 of a 3 part series. Part 1 here

The home page for the 'Oceans' series on the BBC, a good example of a web page with map. An embedded map (bottom right) is one of the options you can follow along with navigation to other types of content.

What: A web page with an embedded map that is a major part of the page.

Use When: Location is a key part of the purpose of the page but not the primary way you want to arrange your content. This makes it differ from the other two types in this series (Map with Web and Virtual Globe) where the spatial information is the key characteristic. If you have a web page where a map is just part of the offering, this is the pattern to choose.

Why: People have been putting maps on the web ever since it appeared just as they have been putting maps in leaflets, newspapers etc. It is now easy to make that embedded web map interactive, i.e. you can zoom in using it or click it for more information.


View London for Frank in a larger map

How: The simplest way is to create a Google My Maps map , click on link in the to right and copy the "paste html to embed..." box content. Paste it into your web page as I have done above and you have an embedded web page. For a more sophisticated map you can use the GMaps API or GEarth API

Examples:

World on the move is another example from the BBC. It uses quite a sophisticated web map with its own timeline.

Another page from the 'Oceans' site. This one is where I think the embedded map does not work

Although the inset map works on the home page as featured at the top of this page, this inset map on the locations page of the same site would be better as a 'Map with Web' IMHO. As it is, you click on the markers to read info in the bottom left - it would work better with the whole screen as a map and clicked markers showed pop up balloons with info in them.