Entering The Wonderful World of Geo Location


I thought I could not be out-geeked. With a background in radio, and having dabbled in the demo scene on the Commodore 64 and hung out on BBSes and IRC for a long time and all the other things normal kids don’t quite get, I thought I was safe in this area.

Then I went to my first WhereCamp, an unconference dealing with geographical issues and how they relate to the world of Web development. Even my A-Levels in Astronomy did not help me there. I was out-geeked by the people who drive and tweak the things that we now consider normal about geo-location on the Web.

Pulling out your phone, find your location and getting directions to the nearest bar is easy, but a lot of work has gone into making that possible. The good news is that because of that effort, mere geo-mortals like you and me can now create geographically aware products using a few lines of code. So, let’s give the geo-community a big hand.

Why Geo Matters

First of all, why is it important to consider physical location on this planet (at this moment) when we develop Web products? There are a few answers to this.

The first answer is mobility. The days of people sitting in front of desktop machines at home are over. Sales of mobile devices, laptops and netbooks have overtaken those of bulky stationary computers in the last few years. The power of processors now allows us to use smaller, more mobile hardware to perform the same tasks. So, if people use their hardware on the go, we should bring our systems to them. Which brings us to the second—very important—point: relevance.

Giving the user content that is relevant to the physical space they are in at the moment makes a lot of sense. We are creatures of habit. While we love the reach of the Internet, we also want to be able to find things in our local area easily: people to meet, cafes to frequent, interesting buildings and museums to learn about. The advertising industry—especially of the adult and dating variety—realized this years ago. I am sure you have come across one of the following before:

Adult personal ads with geo location

I am sure these ads are more successful than the ones that show only user names. That the photos and names are the same for every location doesn’t seem to be a problem (but yes, I noticed it). So how does it all work?

Getting The User’s Location Via IP

Every computer on a network has a number that identifies it: its IP address. The Internet is nothing but a massive network, and your IP number is assigned to you by the service provider that you have used to connect to that network. Because the numbers that service providers assign change from one geographical location to the next (much like telephone numbers), you can make quite a good estimate of where your visitors are from.

To find out where a certain phone number is from, you use a phone book. To find out where an IP is from, you can use the Maxmind GeoIP database. Maxmind also provides a JavaScript solution that you can use on websites:

<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
  var info = document.getElementById('info');
  var lat = geoip_latitude();
  var lon = geoip_longitude();
  var city = geoip_city();
  var out = '<h3>Information from your IP</h3>'+
            '<li>Latitude: ' + lat + '</li>'+
            '<li>Longitude: ' + lon + '</li>'+
            '<li>City: ' + city + '</li>'+
            '<li>Region: ' + geoip_region() + '</li>'+
            '<li>Region Name: ' + geoip_region_name() + '</li>'+
            '<li>Postal Code: ' + geoip_postal_code() + '</li>'+
            '<li>Country Code: ' + geoip_country_code() + '</li>'+
            '<li>Country Name: ' + geoip_country_name() + '</li>'+
  info.innerHTML = out;

Getting the users geographical location using IP - in this case Sunnyvale, California

This gives you some information on the user (try it out for yourself). The challenge, though, is relevance. Your IP location is the location of the IP that your provider has assigned to you. Depending on your provider, this could be quite a ways off (in my case, I live in London, but my provider used to show me as living in Rochester). Another problem is if you work for a company that uses a VPN. At Yahoo, for example, I have to connect to the VPN to read my company email, and I have to choose a location to connect to:

A VPN client allowing me to connect to different servers around the world

So, for a solution like the one highlighted above, I would show up as being in a totally different part of the world (which might be useful for watching Internet TV in the UK while I am in the US). IP geo-location, then, is an approximation, not a dead-on science.

Getting The User’s Location Via The W3C Geo API

Guessing geographical location via IP is possible, but it can also be pretty creepy. Being able to take advantage of your location is useful, but security-conscious users and people who are generally suspicious of the Internet are not happy with the idea of their movements being monitored by a computer. This makes sense: if I can monitor your whereabouts day and night, I would know where and when to rob your house without you being there.

There are a lot of solutions to the challenge of having good-quality geo-location and maintaining privacy. Google Gears has a geo-location service; Plazes helps you store your location; and Yahoo’s Fire Eagle is probably the most polished way to securely maintain your location on the Web.

The problem with all of these services is that they require the user to either install a plug-in or visit a Web service to update their location. This is not fun; browsers should do the work for you.

We now have a W3C recommendation for a geo-location API that allows browsers to request the geographical location of the user. This makes it less creepy, and you get real data back.

Firefox 3.5 and above supports the W3C geo-location API. So does Safari on the iPhone if you run OS 3.0 or above. If you use the API, the browser will ask the user whether they want to share their location with your website.

The geolocation API asks the user if they want to share their location

Once the user allows you to get their location, you get much more detailed latitude and longitude values. Using the API is very easy:

// if the browser supports the w3c geo api
  // get the current position

  // if this was successful, get the latitude and longitude
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
  // if there was an error

Compare the IP and W3C solutions side by side. As you can see, there can be quite a difference in measuring the visitor’s location. The extent of the difference is shown in the following demo:

Difference between IP location and W3C Geo API location

Converting Latitude And Longitude Back Into A Name

Having more information is nice, but we have lost the name of the city and all the other nice data that came with the Maxmind database. Because the location has changed, we cannot just grab that old data; we have to find a way to convert latitude and longitude coordinates into a name. This process is called “reverse geo-coding,” and several services on the Web allow you to do it. Probably the most well-known is the geo-names Web service, but it has a few issues. For starters, the results are very US-centric.

One freely available but lesser-known reverse geo-coder that works worldwide comes from a surprising source: Flickr. The flickr.places.findByLatLon service returns a location from a latitude and longitude coordinates. You can try it out in the app explorer, but by far the easiest way to use it is by using the Yahoo Query Language (or YQL). YQL deserves its own article, but let’s just say that, instead of having to authenticate with the Flickr API and read the docs, reverse geo-coding becomes as easy as this:

select * from flickr.places where lat=37.416115 and lon=-122.0245671

Using the YQL Web service, you can get the result back as XML or JSON. So, to use the service in JavaScript, all you need is the following:

<script type="text/javascript" charset="utf-8">
 function getPlaceFromFlickr(lat,lon,callback){
   // the YQL statement
   var yql = 'select * from flickr.places where lat='+lat+' and lon='+lon;

   // assembling the YQL webservice API
   var url = 'http://query.yahooapis.com/v1/public/yql?q='+

   // create a new script node and add it to the document
   var s = document.createElement('script');

 // callback in case there is a place found
 function output(o){
   if(typeof(o.query.results.places.place) != 'undefined'){

 // call the function with my current lat/lon

Combine that with the other services, and we get a more detailed result and can put a name to the coordinates:

adding the flickr reverse geocode we can get a name for a lat and lon pair

The Trouble With Latitude And Longitude

While latitude and longitude coordinates are a good way to describe a location on Earth, it is also ambiguous. The coordinates could represent either the centre of a city or a point of interest (such as a museum or a pub) in that spot.

WOEID to the Rescue

To work around the problem, Yahoo and Flickr (and soon will Twitter) support another way to pinpoint a location. The Where On Earth Identifier (or WOEID) is a more granular way to describe locations on Earth. Because Flickr supports it, we can easily get get photos from a particular area:

select * from flickr.photos.search where woe_id in (
  select place.woeid from flickr.places where lat=37.416115 and lon=-122.02456

Using this and a few lines of JavaScript, showing geo-located photos is pretty easy:

Photos from a geographical location using YQL and Flickr

This has also been wrapped in a simple-to-use YQL solution. The following code will display 10 photos of Paris:

  function photos(o){
    var container = document.getElementById('photos');
    container.innerHTML = o.results;
<script src="http://query.yahooapis.com/v1/public/yql?q=

You can also play with this in the YQL console.

Why Not Search For The Location’s Name?

The main question about implementations such as the one above is why couldn’t we just do a search on Flickr for the city, instead of doing all the complex geo-lookups? The reason is false positives. Take Paris, for example: if you want to show photos of Paris on a travel website, you don’t want Paris Hilton to show up in there. Same goes for Jack London. You may also want to show photos of London, England, not London, Ontario. Geographic data is full of these kinds of gotchas, and the term for finding the right one is “disambiguation.” See the Wikipedia article on “Victoria” to see just how many geographical contexts this term can have.

Turning Text Into Geo-Data

Finding a visitor’s geographic location is all well and good, but it doesn’t mean much if you can’t link it to information for that area. This is where it gets tricky. For Flickr (and soon Twitter), this is easy, because both services are able to attach geographical locations to the content you put in them. This is not so for most of the information on the Web, though, and this is when we resort to clever algorithms, machine-learning, pattern-matching and all the other think-tank stuff that computers and the scientists in front of them do.

Say you want to identify the geographical locations that a particular text or Web page talks about. Yahoo offers a service for that called Placemaker, and it is pretty easy to use. You need to get a developer key and send this as appid, send a text as documentContent, define the type of the text as documentType and define the type of data you want back as outputType. All of this needs to be sent as a POST to http://wherein.yahooapis.com/v1/document:

<form action="http://wherein.yahooapis.com/v1/document" method="post">
  <textarea id="text" name="documentContent">Hi there, I am Chris.
    I live in London, I am currently in Sunnyvale and will soon be in
    Atlanta and Las Vegas.</textarea>
  <div><input type="submit" name="sub" value="get locations"></div>
  <input type="hidden" name="appid" value="{YOUR_APP_ID}">
  <input type="hidden" name="documentType" value="text/plain">
  <input type="hidden" name="outputType" value="xml">

You can try this out yourself. Using PHP to call the API instead of a simple form, you can even format the output nicely. See it in action here:

finding locations in a text and showing them on a map using Yahoo Placemaker

While developers who have played around with Web services won’t find Placemaker hard to use, the service can be daunting for the average developer. That is why I built GeoMaker some time ago. GeoMaker allows you to enter a text or URL, select the locations you want to include in the final outcome, and get the locations either as a map to copy and paste or as micro-formats.

Geomaker in action

However, because there is also a YQL solution for using PlaceMaker in JavaScript, we can do the same with a few lines of client-side code to enhance an HTML document. Check out the following example:

A map created from geographical locations in a text

To use this, you need three things: a text with geographical locations in them in an element with an ID, a Google Maps API key (which you can get here) and the following few lines of code:

<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
addmap.config.mapkey = 'COPY YOUR API KEY HERE';

This makes it incredibly easy to give your visitors a sense of what part of the world a text is related to.

Adding Maps To Your Documents

Online maps have been around for a while now (and Google Maps was instrumental in the rise of AJAX), and many providers out there allow you to add maps to your documents. Google is probably the leader, but Yahoo also has maps, as does Microsoft and many more. There is even a fully open map service called Open Street Maps, which has been instrumental in the recent rescue efforts in Haiti.

If you want interactive maps, probably the easiest thing to use is Mapstraction, which is a JavaScript library that does away with the discrepancies between the various map providers and gives you a single interface for all of them. 24ways published a good introduction to it three years ago.

Probably the simplest way to show a map that supports markers and paths in your document without having to dive into JavaScript is the Google static maps API. It creates maps as images, and all you need to do is provide the map information in the src URI of the image. For example, in the script example above, this would be:


You can define the size and type of the map. If all you provide is the location of markers, the API will automatically find the right zoom level and area to ensure that all markers are visible. Google’s website even offers a detailed tool to create static maps, including markers and paths.

Geo Is A Space To Watch

I hope this has given you some insight into all of the things you can do to bring the earth to your product and to put your product on the map. Geo-location and geo-aware services are already huge, and they’ll be even more important this year. There will be more services—some mobile providers are ready to roll out new hardware and software—and now you can be a part of it.

What the geo-world needs now is a designer’s eye, and this is where you can help the geo-geeks create apps that matter, that look great and that make a difference in our visitors’ lives. For inspiration, check out Mapumental, which allows you to pinpoint a place to live in London, or see how Google Earth and some 3-D Objects allow you to race a milk truck on real map data.


↑ Back to top

An international Developer Evangelist working for Mozilla in the lovely town of London, England.

  1. 1

    Been using this for a while, it’s very nice :)

    I also use it a lot on the iPhone and it is soooo handy!

  2. 2

    Wow, i was just working on a Google Maps API. This information came right on time !

    Its like u guys can read minds or something.

  3. 3

    Christina Skoii

    March 9, 2010 5:55 am

    Geo people definitely outnerd most of us. I’m very glad they do, it’s so cool, and has so much potential.

  4. 4

    I don’t get it
    Are you guys like watching over whatever projects I am working upon and then you decide to write an article which would help me?
    ffs, it’s the 3rd time in a row you do this.

  5. 5

    Instead of Maxmind, I’d recommend using HostIP for a free and open source API to get geolocation from an IP address: http://www.hostip.info/

  6. 6

    awesome article to start with! hi5!

  7. 7

    Wow, finally a SM article worth reading.

  8. 8

    Excellent article. Very useful stuff.

  9. 9

    finally a true article. Instead of bringing together what is already published smashingmagazine decided to publish an orginal article
    i am very surprised.

  10. 10

    Finally! Thank you!

  11. 11

    I hate geo locating…. I go to Greece and, all of a sudden, everything is in Greek. It’s very confusing. Maybe geo locating is ok, but web sites are using that in a totally wrong manner…

  12. 12

    Awesome article! I have been looking for an intro to this for months without finding something I like until now! Thanks guys keep it up! :D

  13. 13

    Very cool I can’t wait to try this out. Thanks for the article.

  14. 14

    Great artical and another excellent example of a geo-located app is: http://www.locatik.com/ and it’s been there for quite a while (I don’t want to lie but was it 3 years?). The guys who made it (http://www.psiloc.com) are really pioneers.

  15. 15

    I’m currently using geoIP for this purpose, might check your solution as well.

  16. 16

    I helped develop an app that takes your (or others) geolocation data from Twitter (provided it’s enabled) and plots it on Google Maps – check it out: http://tweography.com.

    Some people think geo-location is scary but it hasn’t been a problem for me – searching for @limedaring (myself) doesn’t give anything bad away.

    Great article, thanks.

  17. 17

    It would be nice to have a php API… I would like to know from which country the visitor is so I could automatically serve him the proper site translation

  18. 18

    Thanks For Article its very helpful !! i♥it

  19. 19

    Great article. I’ve integrated various mapping solutions from Yahoo! and Google into web applications but geo-location is definitely an area that I need some education and experience. Thanks for all the source code, examples and reference urls. I’ll be referring to this article quite a bit in the weeks and months to come. Bravo!

  20. 20

    Thanks for a great article Chris!

  21. 21

    Obviously geo is the all time trend. (http://www.joesonic.com/blog)

  22. 22

    interesting article Christian (p.s. enjoyed your slot on the Boagworld 200th episode too!)

    Location aware apps have really took off with iphone apps like foursquare et al.

    I think we’re only scratching the surface of what can be done with location aware applications and we’re going to see lots of innovation in this space in the next few years.

    minority report here we come!

  23. 23

    Wow. This article was a huge eye-opener for me. Had no idea there were so many free geo services available right now. This article came like a godsend since I’m about to start a very location-oriented website. Thanks a million!

  24. 24

    Wow, really great article! Thanks for this!

    Best Wishes,

    Fabian (LionsAd)

  25. 25

    As I’m French, please help me to understand what “Developer Evangelist” has to do in your title?


  26. 26

    Living in a non-English speaking country, I find that a fair number of websites use geo location to set the language a site is presented in. That can be really annoying – and some sites don’t even have an option of changing the default language once they have switched you. From a usability point of view this is a big no!

    Also, here in Japan, most of the ISP are transitioning from ipv4 to ipv6 on their backbone kit – so some of the lookups don’t work that well as the location there are assigned to has changed.

  27. 27

    best article I’ve read here in a while.
    congratulations, christian!

  28. 28

    Thank you for nice content. You let me know the solution for my website ^^

  29. 29

    Andy Feliciotti

    March 9, 2010 8:54 pm

    Some cool scripts, I didn’t realize adding location data was so easy

  30. 30

    Cool tips. Will be handy for an upcoming project.

  31. 31

    Great article Chris, thank you.

  32. 32

    Kristian you want believe me if I tell you that just before comming here to check new osts for today, I send DM to Foursquere to ask them “How” and “Can I” use they app for my project that I’m building….??!?? I don’t belive in magic or that I’m superstitious, but this is weird coincidence :) Million thanks for this post. A+++

  33. 33

    Anybody have any ideas how they do this… http://www.godrev.com. They have live updates of all the users who register.

  34. 34

    Khawar Pervez Butt

    March 10, 2010 12:38 am

    I am also working on flash maps.google and facing problem to detect the user whti IP in gmap. For same city the lang long is same.

    Is there any batter way to get actual location of the user

  35. 35

    Great article Chris, and I’d also like to say that it’s great that you’re responding to comments too!

  36. 36

    something wrong with the RSS feed? Mine is stuck on the charity website article

  37. 37

    Very interesting article. I have been working w/ Flickr’s API and their geo capabilities, so this is very timely. You might also check out Loki.com. They use a database of wi-fi hotspot locations to provide user location information.

    If you are interested in one way to use this, you can see my Flickr/Wordpress location widget at http://runtrails.com/mymountaintrail/nearby-photos-widget-for-wordpress/.

    Thanks for your excellent work on this and other topics.

  38. 38

    great article!
    liked it so much I am actually leaving a comment :)

  39. 39

    Wow. The amount of useful and interesting information you managed to pack into this article in an understandable way is truly remarkable. This article got me stoked to tinker more than any other in the past year! THANKS.

  40. 40

    i wrote a library that provides a W3C geo conform access for phone platforms that have different javascript interfaces:


    give it a spin. supported platforms include blackberry.


  41. 41

    Great info, thanks for sharing!

    I recommend all readers to join the conversation about the bests location widgets for a blog to show where you are on Startups.com. Follow this link http://bit.ly/bKwAsP

  42. 42

    Thanks for this post, I think Geo has only just begun!!


  43. 43

    Wow! I’m impressed! :) Just tested the geomaker on my travelling blog – very accurate! Great job!

  44. 44

    The link over here http://isithackday.com/hacks/geo/js-w3c-location.html asks me to permit to share the location …. Even after permitting, the W3C location API is not working …… Am on FF 3.6

  45. 45

    Great article.
    Thanks Chris!

  46. 46

    Now if you can only give me some ideas on how to deduce the GMT offset from this, it would be great :).

    Nice article by the way .

  47. 47

    Great Article! Thanks so much !

  48. 48

    Always for geo location “YQL Geo library”
    It enables :
    * Detecting the visitor’s location with the W3C geo API and with IP as a fallback
    * Find geo location from text
    * Find location from lat/lon pair
    * Find locations in a certain web document (by URL)
    * Get the location for a certain IP number
    Source and link from http://technology.slashgeo.org/technology/10/03/11/1838208.shtml

  49. 49

    Mateus Artur Schneiders

    March 25, 2010 4:41 pm

    Awesome article, now i realize i was really unaware of geo-location.

  50. 50

    Fantastic round up of what’s available out there!

    Geo is definitely a must to watch in the coming year and the possibilities for marketing, gaming and socializing are huge.

    Looking forward to developing a few apps!

  51. 51

    So you Geo-target your apps, content and even ads, now how can you know that it really shows in the location you targeted? call someone? use time-wasting proxy service?
    As an advertiser who deal a lot with international issues, I started using GeoEdge which lets me choose a location around the world or inside the US and see the exact content: http://www.geoedge.com not a cheap service though but saves time and reliable.

  52. 52

    Great article,
    I will make use of it when programming a wordpress plugin for my wife (real estate agent)

  53. 53


    I am having problem installing google earth. plz see it http://newdailyblog.blogspot.com/2010/06/google-earth-installation-problem.html. Thanks.

  54. 54

    World Travel France

    July 9, 2010 1:41 pm

    The southeastern air of France consists of the Elsass, Lorraine, Franche Comté and Vino regions. The genre has propulsion hills and more picturesque cities, such as Metz, Strassburg, City and Dijon. This location produces some famous wines, including magnificent vinifera noirs and chardonnays valued the group over, as asymptomatic as the famous “Old wine” from the Jura mountain farm.

    World Travel France

  55. 55

    What a great article. Thanks for putting the time and effort to cover all the bases of geolocation. Personally, I love maps and geolocation bring this love to a new level. Just implemented some more geolocation (AJAX ClientLocation) functionality over at http://www.currentweather.ca — Still in early public beta though. ;)

  56. 56

    Lovely, thanks for covering the bases with this article. Any resources on more in depth stuff on geo location and the web?

  57. 57

    Another great article, Christian :)

  58. 58

    Great Article!
    Thanks for your effort and for such a clear straight forward information.
    I used some tools in the past in order to run my campaigns, and I tried different solutions until I came across with http://www.geosurf.com and I really recommend it, it’s a simple tool bar with a drop down country list that allows you to see content from any country that you wish to see. After using all kind of fake proxies which were very slow and not reliable at all, this is an amazing tool!

  59. 59

    I found this to be the easiest way:

    if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
    else xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

    hostipInfo = xmlhttp.responseText.split(“n”);

    for (i=0; hostipInfo.length >= i; i++) {
    ipAddress = hostipInfo[i].split(“:”);
    if ( ipAddress[0] == “City” )

  60. 60

    IE will give you a cross domain AJAX error, but if you want the work around for it email me at junglemonkee4@netzero.net and I will give you the code to fix this issue also.

  61. 61

    Thank you very much. May I translate it to Chinese for future research? I may put it on a blog…
    That would be wonderful.
    Thank You.

  62. 62

    I agree. Geo stuff should be opt-in. What you are talking about is more than geo location – it is also localisation. Guessing a user’s language by location is simply not clever. My favourite is that for some reason Heathrow airport turns Google to the Finnish interface.

  63. 63

    Nice, sadly enough it says I am in Canada :)

    http://ipinfodb.com/ is another one.

  64. 64

    Sorry to say but HostIP is very inaccurate! Maxmind updates their IP to location DB on regular basis. This is what you end up paying for!!!

  65. 65

    See my comment above – this is a bad idea as I am traveling all the time but I don’t change my language. Localisation should always be an opt-in process.

  66. 66

    You’re right Victor. It’s a conspiracy. They’re doing it to me to… (cue the Twilight theme music)

  67. 67

    Lang should be offered automatically of course if users should choose to change they should have that option… and of course if they change it, it should stay cnahnged

  68. 68

    All explained in detail here: http://developer-evangelism.com/

  69. 69

    Did you read the article?

  70. 70

    Obviously random linkbaiting never dies. Or why do you link to a 404 that is unrelated to this?

  71. 71

    Ohhhh, I get it . Develoooooper evangelism, so someone write a book with “guidelines” on how to communicate between techies and non-techies AND earn $17 for each sold copy. Magnificient.

    How about just learning business communication. You know, how to communicate in terms of business.

    Oh, but that doesn’t sound so coooooool.


    Anyway, thank you for an excellent article.

  72. 72

    Rizqi Djamaluddin

    March 27, 2010 5:33 am

    Keep in mind that there are 30 degrees of longitude for each time zone, and you’re on your way.

    (It’s still a bit tricky though. First divide the longitude by 30. Probably split up the hemispheres, and for eastern longitudes round down; for western longitudes round up. Then add or subtract from GMT time. This is right off the bat though, so you’ll probably want to look into more info.)

  73. 73

    Doesn’t seem to be working, when I click on “Sign in with Twitter” I get a white page with this output:

    {“status”: “error”, “code”: 400, “returned”: [], “messages”: ["app name not found: tweography"]}

  74. 74

    nice article!


↑ Back to top