July 22, 2007

Google Maps API vs. Yahoo! Maps API

This is not supposed to be an advertising post for the maps API of my employer. Definitely not. But after playing around with the Google Maps API a little bit and using it for my GeoLinkr plugin, I felt it was time to check out “the other API” from Yahoo! and do some comparison.

Honestly, up until now, I believed that the Google API really kicks ass. Nice and easy to follow “getting started”-examples, good documentation and satellite images covering the whole world up to a great amount of detail. Something that I discovered when developing GeoLinkr is that, e.g. the geocoding facility sometimes does not really work as you would expect it. So I would say it is fair to check out what Yahoo! as to offer in this respect

To be able to make a proper comparison, lets consider the following task: Display a list of cities (big and small ones) located all over the world as (custom) markers on a map. On click on these markers, they should reveal additional information about the city (its population). I have chosen the following cities to be displayed:

  • London (UK)
  • Evansville (Indiana, USA)
  • Vancouver
  • Dornbirn (Austria)
  • Nice (France)
  • Valletta (Malta)
  • Neustadt an der Aisch (Germany)
  • Barcelona
  • Vienna (Austria)
  • Mistelbach (Austria)

As both APIs offer geocoding, the API itself should figure out where these locations are, i.e. get their latitude and longitude values, and place them on the map. To make things a little bit more interesting, I also replaced the english city names with their german equivalents (e.g. using “Wien” instead of “Vienna”).

The HTML markup is pretty basic and straightforward and provides the foundation for both APIs. It looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Maps API Comparison</title>

    <style type="text/css">
    /* the map */
    #mapContainer {
        width: 800px;
        height: 600px;
    }

    /* the text that gets displayed in the info window */
    .infotext {
        font-family: verdana;
        font-size: 10px;
        font-weight: normal;
    }
    </style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" src="[source of the api plus your application key]"></script>
<script type="text/javascript" src="[source of your javascript file]"></script>
</html>
</body>
</html>

I decided to have the list of cities and their population data (kindly provided by Wikipedia) available in a JavaScript array of objects, which looks like this:

var cities = [
    {name:"London",pop:"7.554.236"},
    {name:"Evansville",pop:"115.918"},
    {name:"Vancouver",pop:"587.891"},
    {name:"Dornbirn",pop:"43.854"},
    {name:"Nizza",pop:"347.100"},
    {name:"Valletta",pop:"7.048"},
    {name:"Neustadt an der Aisch",pop:"12.326"},
    {name:"Barcelona",pop:"1.605.602"},
    {name:"Wien",pop:"1.668.737"},
    {name:"Mistelbach",pop:"10.555"}
];

It is actually not important how the data gets in there. It might get retrieved straight from a database or parsed from an XML file using a server-side language, e.g. PHP. The main thing is: You have generic data (the name of a city and some additional info about it) that you want to display on a map. You have no geographical data stored, so the API (i.e. its geocoder) should figure that out, right?. The steps to acquire the task described above would be:

  1. Geocode the given cities and retrieve the lat-and-long values
  2. Place icons on the map representing the cities
  3. By default, center the map over a given location (Austria, in my case) and set an appropriate zoom level (so that all Europe is visible on the map)
  4. Clicking an icon will reveal information about the city

Now lets see what the two APIs can do for us…

Yahoo! Maps API

Check out the final result using the Yahoo! Maps API.

I decided to start with the, for me unfamiliar, Yahoo! Maps API. As said, I did some stuff with the other API before, so I expected to spend much more time to accomplish the given task. But that was not the case. Using the Yahoo! Maps API is pretty straightforward and, given the examples in the Getting Started Guide, I completed it in about one hour. Almost piece of cake. What I found noticeable:

Geocoding

Amazingly enough, without any more information given, the geocoder from the Yahoo! Maps API was able to get the correct values for nine out of ten locations. The only marker misplaced on the map was the one for Evansville. The one I meant was “Evansville, Indiana”, but the marker got placed on “Evansville, Alabama”. But that is okay, cause without any additional information, the geocoder is not able to disambiguate.

Update (September 29, 2007): After correcting the mistake pointed out by Christian, I noticed that Yahoo! Maps places “Valletta” in Florida, USA, close to Tamper, whereas the correct location would be as the capital of Malta, south of Italy. So based on that, it seems that Google has a more precise geocoder.

Custom Icons and Info Windows

Using your own images as marker icons is also pretty easy as well. But as you might notice, it would take a little more tweaking to place the lower end of the pin to the exact position of the location on the map. With a little playing around, I feel that you could get the result you would want.

Further Maps APIs

If you take a look at the Yahoo! Maps API homepage, you will notice that apart from the AJAX API, which is the subject of this discussion, there are also a couple of other Map APIs, namely:

I have not looked at them at all, but I believe that they are great extensions/alternatives to the JavaScript-centered AJAX API. Definitely a thumbs up for Yahoo! I would say.

Google Maps API

Please proceed to the solution using the Google Maps API.

I have used this API before, so I thought that it might even take me less time to accomplish the given task. However, this was not the case. Due to some reasons, which I would say are “interesting” at best, it took about five times the time it took me using the Yahoo! API. I won’t go into further detail here, but the attentive reader might spot the details in the final solution. Noteworthy:

Geocoding

Interestingly enough, the Google Maps geocoder also got nine out of ten locations right, but here “Valetta” (which is the capital of Malta) mas mistakenly interpreted as “Valetta Rd.” (in Ontario, Canada, close to Detroit). The pin for Evansville was perfectly placed in the right state, namely Indiana.

Update (September 29, 2007): As pointed out by Christian, it should be “Valletta”, instead of “Valetta”. My bad. So if spelled correctly, Google gets 10 out of 10 right, which is quite remarkable.

Custom Icons and Info Windows

Also here, using your own icon images is pretty easy. From a design perspective, the Google API offers a lot more options to tweak and style the icons to your needs, which might make it a little bit more attractive for UI people to use it.

Comparison Table 1 – initial loading

The following table presents figures from my experiments. The map was viewed in “normal mode”, meaning no satellite images were requested, just general map data.

Google Yahoo!
Custom JS-File filesize (in bytes) 1.699 1.483
Geolocation rating 10/10 8/10
Number of HTTP requests 42 59
Amount of Data requested 505 KB 1.37 MB
Loading time 3.21s 7.92s

Note: request time and size data was tested on my local webserver using Firebug

Comparison Table 2 – measuring over time

As pointed out by Drew, it might be worth to check how the aforementioned figures change over time, i.e. after the user has carried out several moves on the map (moving in any direction, zoom in, zoom out). So I carried out 20 movements, which were (in the order in which they were performed):

  • up
  • right
  • down
  • left
  • zoom in (twice)
  • up
  • right
  • down
  • left
  • zoom in (twice)
  • right
  • right
  • zoom out (twice)
  • up
  • right
  • down
  • left

Please find the results of that observation below.

Google Yahoo!
Number of HTTP requests 176 255
Amount of Data requested 4.6 MB (75 kB from Cache) 15.68 MB (46 kB from Cache)
Loading time 9.37s 13.58s

Conclusion

From my perspective, both APIs offer a great range of functionality and opportunities for the developer. However, also both have their pros and cons, which I would like to point out here.

Using the Google Maps API, it was much harder (coding-wise) to accomplish the particularly simple task laid out above. Normally, I would say, this is not a good sign. Cause if you are already struggling with such a simple task, then how hard will it be to do some real complex stuff? The geocoding works pretty solid right now got remarkably precise and the number of possibilities you have regarding styling the markers etc. are quite sufficient, I would say. Regarding the amount of detail which is provided in the satellite images, I would say that Google Maps offers slightly more detailed images than Yahoo! Maps.

Accomplishing the task described at the beginning of this post using the Yahoo! Maps API was, as said, a piece of cake. You get the impression that the developers really knew how a user of the API would expect the API to behave, and that is a real plus. The amount of time it took me was minimal compared to using Googles API. The geocoding is pretty decent as well not as precise as Google’s and the number of design options for markers could be improved, I guess. Satellite images are slightly less detailed, but the normal map view offers more geographical details than the one from Google. This might also be the reason why the figures for the number of requests, the load times and the amount of data requested are not as good as for Google.

From my point of view, there is no real winner here. Google Maps is definitely the number one in the marketplace and Yahoo! Maps is still treated as the underdog, which is not really justifiable. Both have their advantages and disadvantages, and finally, I believe they almost equal out each other. In the end it is up to the implementing developer to decide which characteristics are more important for the project.

Further Reading

Google Maps API

Yahoo! Maps API

« JavaScript Programming Patterns More Horsepower for your Web Site »