The Map API Showdown

In an article I published more than 3.5 years ago (my god, time is flying), I compared the states of the Google and Yahoo Maps APIs, particularly looking at their geocoding capabilities and performance. A lot of time has passed since then and I felt it is time to assess the Map API landscape once again, this time bringing two new players to the game: Bing Maps API (by Microsoft) and Ovi Maps API (by Nokia). I will not go into as much detail as with my old post, but rather trying to convey how each API ‘feels’ (regarding ease-of-use, documentation etc.) from a developers point of view.

Kamarov: Give me a stopwatch and a map, and I’ll fly the Alps in a plane with no windows.

from The Hunt for Red October

While there are great posts out there that look at the visual appearance of the map imagery and their readability the topic of this post are the APIs themselves, their capabilities and features and how easy they are to use from a developers perspective. I have put together a little side-by-side comparison, inspired by Sergey Chernychev’s work, to see how common tasks can be performed with the different APIs.

Ovi Maps API

Ovi, Nokia’s brand for their internet services, opened up its Ovi Maps API and their documentation just recently, in December 2010. The API documentation consists of a Developer’s Guide, Maps API Playground and API Documentation. The Developer’s Guide gives a short overview over the API and its capabilities with little code snippets. The aim of the API Playground is to give the developer an interactive interface to play around with code examples and edit code on the fly and see how it impacts the behavior of the example. Finally, the API documentation lists the class hierarchy and methods available for the developer as part of the API.

While I can see the good intentions of providing that API Playground, I actually believe it does more harm than good. For me personally, the way Ovi presents these examples and then having to click on a “code” button to see the code (without being able to easily do “view source”), is frankly, quite annoying. Also, there are not that many examples to begin with, compared to what Google Maps offers. I feel that having separate, distinct URLs for each example (as opposed to a sophisticated JavaScript-heavy interface), where you can do “view source” and easily follow what is going on, is much more helpful. Additionally, compared to how many classes and functions are available in the API documentation, this is, by no means, reflected in the examples. There is also no search functionality in the API docs, which makes them quite cumbersome to use.

With regards to the code, I noticed that upon instantiation of the Ovi map, the developer has to add the zoom control as well as the map type selector (for map, satellite and terrain view) in additional steps in the code, as well as the actual ability for the user to drag the map. I feel like these should come by default when instantiating the map.

// instantiate the map
ovimap = new ovi.mapsapi.map.Display(Y.Node.getDOMNode(Y.one('#ovimap')), {
    zoomLevel: mapOptions.zoom, 
    center: [mapOptions.lat, mapOptions.lng]
});

//add direct mouse interaction
ovimap.components.add(new ovi.mapsapi.map.component.Behavior());

//add the zoom bar
ovimap.components.add(new ovi.mapsapi.map.component.ZoomBar());

// add map type selector (for map, satellite and hybrid view)
ovimap.components.add(new ovi.mapsapi.map.component.TypeSelector()); 

I also encountered a weird behavior, which I feel is a bug: when zooming into the map, either by double-clicking with the mouse or using the zoom control, the zoom control disappears (at least in my comparison example). But I would attribute that to the fact that this API is very new and I would think this will be fixed soon. Looking at the playground, Ovi Maps seems to offer some interesting features in addition to standards like routing, placement of markers, rendering geo shapes and exposing map events in JavaScript. Included in the API are the abilities to render SVG and text inside a graphics context (which might just be an abstraction layer to native SVG capabilities in the browser), as well as an abstraction layer for canvas (at least I believe that is what this is).

The quality of the imagery is not that outstanding, however, the satellite images Ovi has for Europe are much better than what, e.g. Google offers. You can see for yourself if you search for Helsinki in my comparison example and zoom in to the max on both the Google and the Ovi Map.

Resources

Yahoo Maps API

The Yahoo Maps API has not received an update for quite a while, the version I had included in my old post was 3.4, the most current one is 3.8. Besides the Ajax API, Yahoo Maps still offers the Flash version (although one could argue how useful this still is, considering how powerful JavaScript has become in recent years), as well as a REST API for requesting static map images (great for non-JS solutions) and support for GeoRSS.

The landing page for the Ajax API documentation has a lot of copy & paste examples right there, including a small description and a unique URL to display the full example. They also offer a bunch of cheat sheets, which I personally don’t use because they get outdated quickly (I’d rather have good up-to-date online documentation with explanatory examples and well-structured API docs). You can download the examples plus the cheat sheets bundled together in one zip file to explore on your own machine.

The actual API documentation is, by far, not as fancy as Ovi’s, but it somehow serves me much better. For example, if you would like to know which method to call in order to set the zoom level on the map, I just use Strg+F (or ⌘+F on Mac) searching for ‘zoom’ in the browser. After a few hits on ‘next’, I found setZoomLevel(zlevel). Without having to click myself through a class hierarchy structure.

Similar to Ovi, Yahoo Maps requires that type, zoom and pan controls are added separately and are not part of the initial instantiation.

// instantiation
ymap = new YMap(Y.Node.getDOMNode(Y.one('#ymap')), YAHOO_MAP_REG, new YSize(500, 300));

// center on default location
ymap.drawZoomAndCenter(new YGeoPoint(mapOptions.lat, mapOptions.lng), 8);

// add controls as ymaps does not provide them per default
ymap.addTypeControl();     

// Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control  
ymap.addZoomLong();            

// Add the Pan control to have North, South, East and West directional control  
ymap.addPanControl(); 

Together with Bing Maps, Yahoo Maps also requires an API key in order to actually use the API. The key needs to be part of the URL when requesting the Yahoo Maps API JavaScript.

It terms of available functionality, one can tell that this API has not received any major updates in a while. Apart from the what you would expect from a maps API (display of markers, info windows, polyline overlays), it does not have any outstanding additional functionality, in fact, it actually lacks the ability to get directions (even though the web interface offers that). And looking at the map imagery, especially looking at the satellite images, other providers provide much more detail.

Another interesting fact is that the Yahoo API is the only one amongst the 4 whose zoom level scale is somewhat reversed, meaning a zoom level of 1 corresponds to the closest view, whereas zoom level 16 means zoomed out to continent level. What I find really nice though, is that the Yahoo API has a geocoder built-in, in contrast to some of the other APIs. So if I have a location input field, I can just pass whatever the user typed in to the drawZoomAndCenter function, like so:

ymap.drawZoomAndCenter(
    "San Francisco",
    zoomLevel
);

Resources

Bing Maps API

With the launch of its search engine Bing, Microsoft also redid what was Live Search before and released Bing Maps. The API, to develop web applications, is currently in its 7.0 version and its MSDN style documentation still makes me think I am in the year 2000—despite visual changes and redesign of the MSDN site. The first thing Microsoft points out in the “Getting Started” guide is that you should please sign up for an API key. The documentation provides a few examples, which should be taken with a grain of salt, as all of them include the Bing Maps JavaScript in the <head> of the document, which is a bad idea for performance reasons. It is also kinda tedious that they don’t provide the developer with actual pages where they can see the examples in action, but instead they make you copy and paste the example to your own machine and fill in your personal API key in order to see what is happening. The API reference is fairly well structured and clear, however it also lacks a search functionality (although, because it is not that massive, it might not be required).

Instantiation of the map is pretty standard, however centering the map on a new location based on user input is not. In fact, what you need to do is include a script element dynamically, which points to the Bing geocoder webservice, and provide a JavaScript callback for the JSON-P response (as shown in this example) Something that should really be abstracted within the API.

In addition to the standard map functionality, Bing Maps also offers a directions service, custom tile layers and displaying localized maps.

In the interface itself, the API offers a so-called Bird’s eye view, which is essentially a hybrid view (satellite plus road data/labels) which switches over to an angled view, similar to what can be seen in Google Maps and Google Earth, when the zoom level is high enough. I was very impressed by the image quality here, for both cities in the US and Europe (you can see for yourself, searching again for “Helsinki” in my example and zooming in to the maximum level on Bing Maps, with the map type set to “Bird’s eye”).

Resources

Google Maps API

Last, but not least, in my personal opinion the Google Maps API is still king amongst all the Maps APIs out there. The amount of functionality offered by theGoogle Maps API family and the JavaScript API itself never ceases to amaze me. With the current version 3, no API key is required any more, which makes inclusion of the JavaScript and getting started even easier.

Google is often criticized for is very developer centric approaches and interfaces, but the sheer amount of documentation they provide for developers plus they way they present it makes it very smooth and easy to use their API. The have a guide for new developers that covers the basics and standard functionality and an API reference (similarly structured like the one from Yahoo). But probably the best part of the docs are the examples. Well structured, with unique URLs for the developer to look at with just one click and digging deeper by doing a simple ‘view source’.

With regards to functionality, the Google API really offers everything you could ask for from a Maps API—and more. Just to name a few that strike me as quite impressive are additional map layers, provided by KML or Google Fusion Tables as well as Bike Paths and Routes. You can create a custom map type with different styles, get the elevation along a certain path and include the all so beloved Street View. In addition, the API performs great on mobile devices.

The imagery of the satellite images is still very good and the readability of the map view has already been discussed on 41latitude.com. It would be great if Google would expose Google Earth views through the JavaScript API as well (for angled views, similar to what Bing offers), but this is exposed through the Earth API, which is separate from the JS API. It is however seems to be possible to integrate the JS API with the Earth API, although the example is referencing the JS API version 2, which is deprecated.

Resources

Conclusion

If you are looking for a generic map solution for your site or application, the Google Maps API is the way to go. It incorporates features that will most likely cover close to 90 percent of the use cases out there that relate to map applications. However, you might have very specific requirements, that Google Maps might not be able to fulfill to the fullest extent. If you need an API that provides great map data for Europe, then you might want to consider the Bing Maps API, which has great satellite imagery of European cities. The Ovi Maps API has just been released, but has some innovative approaches in there, whereas the Yahoo Maps API, because it has been neglected for quite some time, has been falling a little bit behind when it comes to state-of-the art features. If you want to read more about the topic of maps, especially regarding their readability and quality of imagery, I suggest you check out Justin O’Beirne’s site, where he shares a lot of his thoughts on this topic.