JavaScript Map API comparison

Mapping APIs are some of the most popular data services on the web today. If you’ve ever visited a restaurant website, taken your car in for service or browsed a mash-up you’ve probably come across interactive and static map images powered by Google, Yahoo, Microsoft, or AOL. In this post I’ll compare performance and developer friendliness of JavaScript mapping APIs and dissect choices made by each platform that may affect your website.

Maps API comparison

I chose my office location in San Francisco’s South Park district as a basis of comparison. The area has large buildings, small alleys, one-way streets, and newly constructed roads and bridges. Each map is a 400-pixel square centered on my office using lat/long coordinates and marked with each service’s default marker. I specified a small zoom control and no marker events for quick and minimal interaction across platforms. This simple test is my attempt to recreate what a flower shop, mechanic, or other business might place on their website to help visitors add context to an address.

Performance

Every time you add a widget or other external feature to your website you are handing over part of your web page experience and performance to a third party. The responsiveness and total page load of these external services is one way obsessive geeks tune and tweak their sites for optimal performance. Let’s take a look at how the major mapping players performed.

Map API performance
ProviderRender (s)Size (KB)FilesMemory (MB)
Yahoo!3.052072413.43
Google3.182232719.8
Microsoft3.652362013.9

Yahoo! offered the fastest performance, the smallest total download, and the smallest memory footprint in my tests. Microsoft’s maps took a half-second longer to download and display than either of its competitors. Google had the highest total file count due to its mapping tile behavior.

Measurement Method

Map API performance was measured using Mozilla Firefox and Firebug network monitoring using a first-generation Apple MacBook Pro connected to the Internet over cafe Wi-Fi in San Francisco. I restarted Firefox for each of the three performance tests and requested each service with a clean cache.

Closer look

If you take a closer look at each of the APIs the performance impacts and general API design begin make a lot more sense. Increasing your domain count allows more parallel downloads but will also require a new DNS lookup for each new domain.

Google Maps API 2.84

Google served its 27 files from six separate domains. Google placed 16 map files in my browser, covering a 4096 pixel square to deliver my 400 pixel square window, or 10 times the total requested area. If a site visitor clicks and drags your map they will not have to load another tile as they explore the immediate vicinity.

Yahoo! Maps API 3.7

Yahoo! Maps utilize the YUI JavaScript library to interact with the page and handle new events. They are using old beta versions of YUI 2.0 libraries DOM, Event, Drag and Drop, and Animation.

Yahoo! served files from 4 domains including 9 map tiles. Yahoo! adds a map scale to each page, adding a few more images and functions to your total page load.

Windows Live Local Search Maps Virtual Earth API 5.0

Microsoft uses its ASP.net Ajax (“Atlas”) JavaScript libraries inside of your map view. The Virtual Earth API adds files and features you never asked for such as CSS files for traffic conditions and extra images typically used in its Dashboard interface.

Microsoft rendered its map using only 6 tiles covering a 1500 pixel square, or about 4 times the requested map window.

Quick notes

My mapping test was a quick experiment to measure the strengths and weaknesses of various developer platforms and services. You can view my full test suite and alter each comparison for your own needs.

All of the mapping API providers offered similar street data but differentiated itself with add-ons and overlays.

Best developer site
Virtual Earth SDK

Microsoft’s Virtual Earth Interactive SDK was the best-designed site for new map developers. I was able to easily browse examples, view each example on a live map, view source code, and dive deeper into each method’s full documentation when needed. Microsoft helps upgraders quickly figure out what’s new with a special call-out at the bottom of their dashboard.

Best use of color
Yahoo! Maps include color-coded neighborhoods, green parks, and dark blue water. The bright red freeways draw attention away from my points of interest. Yahoo! color-codes some building outlines but it’s unclear how someone might decipher a pink office building or orange hotel.
Best buildings
AT&T Park Virtual Earth

Microsoft provided the best identification of major buildings in my tests. Their map showed the outline AT&T Park, a baseball stadium home to the San Francisco Giants, and not just the plot of land.

Best map design
I prefer Google’s map markers over the talk bubbles, pushpins, kites, and stars used by other services. Google’s placement and size of street names was the easiest to read in my tests. Street names are repeated every few blocks so you’re never too far away from the proper context.

I tried the MapQuest Open API beta but found the documentation and learning process extremely frustrating. The MapQuest API provided no live drag events in my testing and seemed to prefer surrounding your map in a colored navigation frame and web form. MapQuest may be the current mapping leader, but its API is far behind the large web portals.

I like the ideals behind the OpenStreetMap but its United States coverage is almost non-existant.

Summary

Google Maps continues to dominate the mapping API space but there are some viable alternatives. Yahoo! and Microsoft may have an advantage bundling maps and other APIs with their freely available JavaScript, Flash, and Silverlight libraries and frameworks while Google adds advanced features such as street-level views and Google Gadget info windows.

I’m glad big Internet portals are spending millions of dollars for online mapping supremacy I can easily integrate in my web applications. The mapping API space changes at least once every 6 months but I am still satisfied with my choice of Google Maps on Startup Search.

4 comments

Commentary on "JavaScript Map API comparison":

  1. Andrew Turne on wrote:

    Of course, you could use Mapstraction, write your map interface once, and then just switch to the map provider that you like the design/interface/loading speed of.

  2. Julian Skeels on wrote:

    And don’t forget the Multimap API!

  3. emad on wrote:

    too many tiles = more HTTP connections = a longer wait time for users.
    serving from multiple domains/subdomains is a means to get around browser limitations that limit simultaneous downloads from the same domain/subdomain. this, too, is done for better performance for the useralso, lets not forget the quality of data by each…how often the aerial photos are taken, how accurate the geocoder is, etc. Remember that some providers (such as google) uses different sources for maps api versus maps.google.com (licensing requirements, etc) and many of the features on their site are not built into the maps (i.e. 3D buildings)One big thing that could get me to stop using an API is when that API starts showing advertisements on maps I am using on my sites.

  4. George on wrote:

    Great review, thanks.I am a user, not a developer as you can see from my URL.If anyone does that again, which mapping option allows anyone to show half a dozen locations that can be briefly annotated.Thanks, George