Fragmented Thought
TwitterGitHub

Client Side Geolocation

By

Published:

Lance Gliser

Heads up! This content is more than six months old. Take some time to verify everything still works as expected.

This particular example shows you how to update a version 3 Google map to your current location. But, it should show you the needed pieces to allow you to create your geolocation js effects. Most of the comments you'll need are right in the code for easy copy paste.

// costume module housing object
customModule = {
  // globalInit function should other things be required later
  init: function(){
    // Fire nearby map updates
    customModule.nearby.init();
  }
  ,nearby: {
    tracker: null
    ,minimumAccuracy: 150 // Must report that it is within at least 150 meter accuracy
    ,map: null // The map object to be updated
    ,latitude: null // Last known latitude
    ,longitude: null // Last known longitude
    ,init: function(){
      // Only try to fire the tracker if it's not tracking
      if( customModule.nearby.tracker == null){
        // Set up a watchPosition to constantly monitor the geo location provided by the browser
        // Full spec for navigator.geolocation can be found here: http://dev.w3.org/geo/api/spec-source.html#geolocation_interface
        // Note that watchPosition is cheaper on processing power for the end user than polling the current location multiple times

        // First, check that the Browser is capable
        // NOTE: !! forces a boolean response
        if(!!navigator.geolocation){
          // Start a tracker
          customModule.nearby.tracker = navigator.geolocation.watchPosition(
            customModule.nearby.success // Register a success callback
            ,customModule.nearby.error // Register an error callback
            ,{ // Options
              enableHighAccuracy:true // This is gets you accuracy anywhere from 5-50ish meters
              ,maximumAge:30000
              ,timeout:27000 // How long without gps updates the code should continue to try to fire in milliseconds
            }
          );
        } else {
          // Some browsers will not be capable
          // Others my have capable browsers, with the setting for 'allow websites to ask my location' off
          // Give a "Please enable geolocation in your browser for more accuracy"
          jQuery('body').prepend('<div class="warning">Your device is not capable of geolocation. Please see <a href="">this page</a> for ways to turn it on.</div>');
        }
      }
    }
    ,success: function(position){
      // Ensure we actually have moved. No point spending cpu cycles to update the map if we have not.
      if( customModule.nearby.latitude != position.coords.latitude || customModule.nearby.longitude != position.coords.longitude ){
        // Pan the map to the current location
        customModule.nearby.map.panTo( new google.maps.LatLng(position.coords.latitude, position.coords.longitude) );
      }

      // Check that the accuracy of our Geo location is sufficient for our needs
      // If it is, stop running geolocation.
      // Remove this to cause the device to continually update to your location
      // One use of this would be to follow you down the street
      if( position.coords.accuracy <= customModule.nearby.minimumAccuracy ){
        navigator.geolocation.clearWatch( customModule.nearby.tracker );
      }
    }
    ,error: function(error){
      // Todo: Decide if you want to announce that errors have occured. The two most common are below
      switch(error.code){
        case 1:
          // alert('User denied Geolocation');
        break;
        case error.TIMEOUT:
          // Note that desktops that share their location, will eventually hit this
          // It's annoying, and maybe should not be stated
          // Perhaps toggling some 'tracking' on off light on the screen would be better
          // alert('Timeout!');
        break;
      };
    }
  }
}

jQuery(document).ready(function(){
  customModule.init();
)};