Frustrating User Experiences: iPhone Mail.app TraceMonkey: DOM, Canvas, Opensource and more
Aug 22

Where are you? Using the new Ajax ClientLocation API

Ajax, Gears, Google, Mobile, Tech with tags: , Add comments

We just announced two new ways to get location info from a browser client.

The Gears GeoLocation API is very detailed. It is able to use GPS, cell towers, WiFi, and ip addresses to work out the location, and you get an “accuracy” parameter to see what was available. As well as getting a position, you can watch a position so you are updated when a change happens. This is perfect for mobile devices that have Gears installed, and since the community is working on the W3C Geolocation spec it should be in many more places soon.

To go with the Gears API, we also have an API that goes along with the AJAX APIs, called ClientLocation.

This is an ip based geocoder that we have made available, and is very simple.

I put together a trivial example called Where Are You? that ties together this API with the Maps API:

You get access to the data from google.loader.ClientLocation, which is null if it can’t be calculated.

Here is a bit of JavaScript that ties it together:

google.load("maps", "2.x");
 
google.setOnLoadCallback(function() {
    if (google.loader.ClientLocation) {
        var cl = google.loader.ClientLocation;
        var location = [cl.address.city, cl.address.region, cl.address.country].join(', ');
 
        createMap(cl.latitude, cl.longitude, location);
    } else {
        document.getElementById('cantfindyou').innerHTML = "Crap, I don't know. Good hiding!";
    }
});
 
function createMap(lat, lng, location) {
    var mapElement = document.getElementById("map");
    mapElement.style.display = 'block';
    var map = new google.maps.Map2(mapElement);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new google.maps.LatLng(lat, lng), 13);
    map.openInfoWindow(map.getCenter(), document.createTextNode(location));
}

22 Responses to “Where are you? Using the new Ajax ClientLocation API”

  1. Angel Furukawa Says:

    Why in third world this amazing things doesn’t work well?

    I mean, the map points out my location to Estado de Mexico. Hot hot … but I’m in Mexico City.

    Regards and keep up the good work! :D

    – Angel Furukawa

  2. funtomas Says:

    For me, it works perfectly. Good job!

  3. grah! Says:

    Placed me 2km out from my current location. Quite nice though.

  4. dion Says:

    Hi all, thanks for the comments so far.

    Since this method is IP based geocoding it is notoriously fluffy and your mileage may vary for sure (e.g. Angel’s experience). You can also imagine scenarios such as using Satellite internet :/

    The Gears geolocation piece on the other hand has a more varied approach, which includes GPS, cell tower, and WiFi id if it is available (http://code.google.com/apis/gears/api_geolocation.html).

    Cheers,

    Dion

  5. Amre Ellafi Says:

    well , thanks for the info. i think the service in not IP-based it shows me located on Alexandria ,VA ,USA while I’m located actually couple thousands miles away, Exactly Alexandria, Egypt !!

  6. jap1968 Says:

    I am in Spain. The API indicates that I connect from Madrid, but I really connect from a city more than 300 KM away.

    At least the country is correct!

  7. Richard Kimber Says:

    Hi Dion,

    I get ‘google is not defined’ on geodata.html without Gears installed. This happens on IE7, FF3 and S3.

    Rich

  8. dion Says:

    Richard,

    You get this when you go to http://almaer.com/whereareyou/ ?

    Cheers,

    Dion

  9. Richard Kimber Says:

    I get ‘Crap, I don’t know. Good hiding!’ from both http://almaer.com/whereareyou/ and http://almaer.com/whereareyou/geometa.html.

    When in http://almaer.com/whereareyou/geometa.html, Firebug reports:
    google is not defined
    var geo = google.gears.factory.create(’beta.geolocation’);
    geometa.js (line 61)

  10. Fab Says:

    It says I’m at least 40km far from my real place… and we have the server “at home”

  11. Dero Says:

    Works quite well for my connection. Brno, Czech Republic it is.

  12. Luca Says:

    “Crap, I don’t know. Good hiding!” – hum…no tricks here :|

  13. Dmitry Says:

    yet another “where are you” example with Google geolocation: http://linkstore.ru/geo/

  14. Jose Says:

    “Where are you?” tells me I am in Pontevedra, GA, Spain but I am in Vilagarcia de Arousa (The distance between Pontevedra and Vilagarcia is 30km)
    Geolocation using only ip adress it is not exactly….

  15. Alrond Says:

    At the beginning, Google Geolocation API has determined the location for only Americans, for the other it has returned “unknown”. Later this service was advanced, but it often does not show results even for developed countries as yet. For such cases, there is a simple javascript extension to the Google API, which gives back the country of user.
    http://www.wipmania.com/en/blog/google-geolocation-api/

  16. michael Says:

    Close – I’m in Langford, BC – You say Saanich, BC, Canada – 12.6 km – Not bad considering you had the WHOLE WORLD to choose from! ;-)

    mxt

    THINK
    think different
    Think Open Source

  17. Brett Says:

    For everyone reporting incorrect addresses: the API gets your client IP, resolves it to your ISP’s IP, and gets the public, registered address for that ISP, or their POP. So, if you’re in towns A, getting an IP from your ISP, either static, or dynamic, and your ISP has POP’s all over the place, and they bring all the traffic into a central location before sending it out of their network, you will generally get the registered address of that location – if registered, etc.

  18. Santiago Says:

    Hi, where can i see the list of citys? i need the exact characters of each city name Thanks

  19. Clayton Says:

    Any solutions be it free or paid that allows close proximity location detection without using Google Gears?

  20. Cosmetic Dentistry Says:

    http://www.dentistrynow.tv

    Location works for my site at my location, but a client with AOL service did not see the map appear. And someone else a few miles away with AT&T service did not see the map as well.

    Will gears fix this? Or is there a workaround you think? I’d hate to have everyone download gears to view these maps… (VERY cool though)

  21. kumar sekhar Says:

    Please any one give me idea how to locate current location on mobile website page? Thanks in advance.

    Regards
    Kumar Sekhar

  22. Current Weather Says:

    Nice article. Actually just implemented ClientLocation over at http://www.currentweather.ca and hopefully soon it will be supported on most mobile devices as well. I love geolocation :)

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What is the number before 3? (just put in the digit)