A while ago I blogged about Static Maps and how these could be used without any JavaScript. This means that Static Maps can be used to develop mapping applications that use ‘Progressive Enhancement’. Basically this is a fancy way of describing applications that gradually increase their functionality only as and when required by the end user (so the application becomes progressively enhanced).
One of the disadvantages of JavaScript mapping APIs is that the browser needs to download the JavaScript library before the mapping loads. This can take a little time. If you use a static map it requires no download of the JavaScript library and therefore a quicker download of the page and map. This means that you can use these together, starting with the static map, and then progressing to the JavaScript mapping API only if the end user needs advanced map navigation or searching.
Active Hotels have implemented a great example of progressive enhancement using Multimap Static Maps and the Multimap API. It is really important that the hotel brochure pages download really quickly (so as not too lose the end user). Active Hotels also wanted a map on the page, but perhaps only about 20% of end users ever interact with the map (e.g. dragging it to pan). So if Active Hotels used a full Mapping API for the page it would lead to slower downloads and 80% of the end users would not use the advanced mapping functions anyway. Instead Active Hotels used the Multimap Static Maps for the initial map on the brochure page (see image above). If a user clicks on the static map to interact with it, only then is the Multimap API downloaded and a full rich ’slippy’ map is available (see image below).
Try it for yourself here or by searching for a hotel on Active Hotels.
One of the more popular features in Multimap and Virtual Earth is the Birds Eye (oblique) imagery. The coverage of Birds Eye is now awesome and it can provide great context information. for example if you are booking a hotel you can check out the neighbourhood and see if it is next to a busy road to see beyond any ’spin’ in the brochure. Many implementations of the Multimap API and Virtual Earth in the travel sector allow users to navigate a map and switch to Birds Eye view.
However the snag is that many web site users are not really into maps and some figures suggest that only 20% of users ever interact with an AjAx map (e.g. by panning). But wouldn’t all these people who hate maps still not find a bird’s eye view of their hotel useful? It is only a photo after all….
I think Active Hotels have come up with a great solution for this. On the brochure pages for hotels, as well as a user being able to use a map, there is also a simple link for users to click on to see a Birds Eye photo:
This link simply opens up a birds eye view of the hotel (using the Multimap API behind the scenes). It’s that simple, and therefore a brilliant idea.
Using the Multimap API you can do the same (and even remove all the controls for a clean look). For example here is a simple picture of Big Ben.
Here is the JavaScript you need:
<script type="text/javascript" src="http://clients.multimap.com/API/maps/[api_key]"></script>
<script type="text/javascript" type="JavaScript ">
var mapviewer;
function onLoad()
{
//Add the map
mapviewer = MMFactory.createViewer(document.getElementById('mapviewer'));
mapviewer.setMapType( MM_WORLD_BEHYBRID );
mapviewer.goToPosition( new MMLatLon( 51.50064,-0.12453 ) );
}
MMAttachEvent( window, 'load', onLoad );
</script>
And the associated HTML:
<body>
<!-- The Multimap Map-->
<div id="mapviewer" style="position : absolute;top : 0;left : 0;width : 700px; height : 700px;"></div>
</body>
You can also use the API to check that there is BE coverage for a location.
So if you hate maps you can still use bird’s eye views!
Subscribe with RSS