Google Maps Free Alternatives

We love Google products much like why we love Apple here at Fubra (apart from those who don’t believe in the great Steve Jobs), they work and work well. But recently they made a change to their Maps API that caused us to rethink our mapping strategy drastically.

Since October, Google introduce a clause in their usage terms that states that if you do go over 25000 user sessions a day then they can start charging you a fee for use. Not such a big deal some may say and Google did note in their developer blog…

Based on current usage, only the top 0.35% of sites will be affected by these limits, meaning that the Google Maps API will remain free for the vast majority of sites.

Google Developer Blog

On the usage statics from a post last year on their blog that means 1225 sites will be affected (probably more).

One of our sites, World Airport Codes, is one of those sites. I suppose it’s nice to be thought of as one of the 0.35%, but not so good that the costs of using Google Maps on this particular site would be more than it earns in advertising revenue.

So our search for a replacement started!

There are a number of solutions out there that still offer a free service, you just have to look and take into account that they may not have as much functionality as Google Maps offer and a different library to work from, but with a little work and some real thought, they can be just as good, if not better.

Our solution for World Airport Codes was two fold; a Javascript map API and a map tile service.

Javascript Map API

For the Javascript map API we went with CloudMade’s Leaflet as it’s lightweight, simple and open source. It’s also one of the nicest looking APIs out of the box both looks-wise with the navigation being very simple and contemporary and it’s implementation Javascript giving Google a run for it’s money. The only issue on the initial use of Leaflet, for us, was that they do charge for commercial use of their map tiles, so we had to have a look at a different map tile provider; which Leaflet makes very easy to implement just by changing one URL.

Map Tile Service

The most popular source of map tile data out there is OpenStreetMap; we also found that, in some places, it’s updated more frequently than Google Maps thanks to the open community that a few of us at Fubra have already contributed too. The issue we did file with using OpenStreetMap tiles directly was that of a shallow one; they’re just not that pretty…

Open MapQuest uses data from OpenStreetMap but adds it’s own style to the maps that we think looks better than Google’s. And the other thing is it’s free! Open MapQuest ask that if you are going to load more than 4000 tiles per second then to email them with your estimated usage. This, I believe, is to do with making sure their servers can cope and that your not going to be a resource hog. On top of that you must include a snippet linking back to them saying they have provided the map tiles.

They do look great and provide a level extra level of information missing from Google Maps such as coastal boarders, a relief map and airport runways (helpful for World Airport Codes).

Putting it Together

If you want to use Open MapQuest tiles in Leaflet then all you need do is change theses lines of code:

[js]var cloudmadeUrl = ‘http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png’,
cloudmadeAttrib = ‘Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade’,
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});[/js]

To something like this:

[js]var cloudmadeUrl = ‘http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png’,
subDomains = ['otile1','otile2','otile3','otile4'],
cloudmadeAttrib = ‘Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';

var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});[/js]

What we are changing here is the attribution text (which is longer) and adding the new URL to grab the map tiles from and setting an array of sub-domains for faster loading. That’s it really.

We now have a map that used to look like this previously with Google:

Our Google Maps previously

But now with Leaflet and Open MapQuest it looks like this:

Now with Leaflet and Open MapQuest implimented

If you want to learn more about working with Leaflet then check out their documentation page and for more on using Open MapQuest tiles as well as other services then head over to the developer page for that.

Other solutions

Our solution for World Airport Codes works perfectly for what we want it for but others may want more, or just want to check out other mapping solutions. Here’s a list of those alternative solutions for Google Maps and notes we have taken in regards to their usage (in no particular order):

  • Ovi Maps – Yahoo! now use them for their mapping solution, but there is a clause in their terms that says usage “may be or may become subject to charges” (see point 9)
    Ovi Maps

    Ovi Maps

  • OpenLayers – a completely open source project from Open Source Geospatial Foundation released under the FreeBSD license
    OpenLayers

    OpenLayers

  • OS OpenSpace – a mapping API project developed by Ordnance Survey, but only UK mapping data is available and you are limited to loading 65000 map tiles a day
    OS OpenSpace

    OS OpenSpace

  • Bing – the main competitor to Google but comes with more restrictive usage of “125,000 sessions or 500,000 transactions in a 12 month period”
    Bing Maps

    Bing Maps

  • MapQuest – I’ve already spoke about them, but they do provide their own APIs to use and have the best license info we found
    MapQuest

    MapQuest

Hopefully that will help provide more ideas for using something other than Google Maps for your web app. If you have any other alternative solutions then please feel free to leave a comment!