HTML5 Geolocation with Fallback to Google Ajax API

Google Ajax API does location lookup, so it makes it a great fallback for the native HTML5 Gelocation API. Of course, the fallback will never get near the same accuracy as GPS lookup, because it does a lookup on your ISP, but it is at least able to get you in the ballpark as a fallback.

Include Google AJAX API with your api key and then go ahead and use this code.

<script src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>

var myLocation; // global variable to store lat/lng
if (navigator && navigator.geolocation) {
  // HTML5 GeoLocation
  function getLocation(position) {
    myLocation = {
      "lat": position.coords.latitude, 
      "lng": position.coords.longitude
    }
  }
  navigator.geolocation.getCurrentPosition(getLocation);
} else {
  // Google AJAX API fallback GeoLocation
  if ((typeof google == 'object') && google.loader && google.loader.ClientLocation) {
    myLocation = {
      "lat": google.loader.ClientLocation.latitude, 
      "lng": google.loader.ClientLocation.longitude
    }
  }
}

You then have access to the user’s location with the “myLocation” variable and can take it from there.

Comments

  1. says

    Very nice..

    Wouldn’t it be more correct to include the google api script only if the native geolocation wouldn’t work?

    Cheers, and thanks for a great example..

  2. says

    Erik: Maybe, but I use the Google Ajax API to load jQuery and Google Maps anyways so that is why I didn’t bother including it only inside the fallback section.

  3. Dan says

    Thanks for this- I was hoping the usage was as simple as it seemed based on a quick read of the API. Your example gives me quite a bit of encouragement.

  4. says

    Thanks for the brief article Marc. I can’t wait for Google’s API 3 with the inclusion of bike paths… I’m on a bike and…

  5. says

    hi there.

    How can I check if user accepted the geolocation check or not?
    I’d like to initialize a map, then navigate to the myLocation coordinates.

  6. says

    The navigator.geolocation.getCurrentPosition(success, error) takes two functions, success and error. You can branch the code further by changing the above code to navigator.geolocation.getCurrentPosition(getLocation, error); and making a new function error() { ... } to handle the case where someone denies sharing their location.

  7. says

    By the way, let me add two things.

    First, I know you are an open source guy; I wouldn’t have asked you about .net. I am also and learning to use jQuery and that is why I ran across your blog.

    And secondly, I wish there were a way to have two different gravitar icons available to me with my main email address. Having my WoW toon show up next to my post has to detract something from my statements. I am off to add an email and icon to gravitar.

    Anywho wtb edit button.

  8. says

    i don’t understand about script, btw i found script like this, maybe usefully…thanks^^

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
      } else {
      alert("Geolocation Not Support");
    }
    function successFunction(position) {
      var lat = position.coords.latitude;
      var long = position.coords.longitude;
      alert("Latitude:" + lat + " Longitude:" + long);
      document.write (lat);
      document.write (long);
    }
    function errorFunction(position) {
      alert("Error!");
    }

  9. NewUser says

    Tell me please, this code work with GPS navigator or he working only with IPlocation? And where can I see then this location? In my api account or In access log file In hosting? I dont understent about that. I can see this information fallback on the map or text with latitude and longitude?