Geolocation Step 6 - Complete component

Geolocation Tutorial - Step 6. Adding support for continuous updates from the client for real-time tracking.

by jmayes

HTML

<!DOCTYPE html>
<html>
  <head>
    <!-- Coded by Jason Mayes. Questions? Get in touch at: www.jasonmayes.com -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Jason Mayes" />
	<meta name="description" content="HTML5 template" />
	<meta name="keywords" content="HTML5, template" />
    <title>HTML5 Template</title>
  </head>
  <body>
    <h1>Gelocation Component - http://goo.gl/1Mbn4</h1>
    <div id="geoResults"></div>
  </body>
</html>

CSS

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

h1 {
  font-size:42pt;
  margin:15px 0 15px 0;
}

ul {
  margin:10px 0 10px 0;    
}

ul, li {
  margin-left:15px;
}

li {
  list-style:circle;    
}

#map {
  height:400px;
  width: 100%;
}

JavaScript

/**
 * @fileoverview A Geolocation component.
 * @author Jason Mayes
 */
var geoComponent = function() {

  /**
   * The callback function upon receiving Geolocation data.
   */
  var geolocateCallbackFunction = null;

  /**
   * Store reference to the returned watchPosition geolocation object.
   * @type {int}
   */
  var continuousReference = null;

  /**
   * Check if Geolocation is supported by the clients web browser.
   * @return {boolean} If the Geolocation object is available to use or not.
   */
  function isSupported() {
    if(window.navigator.geolocation) {
      return true;
    } else {
      return false;
    }
  }

  /**
   * Handles successful geolocation.
   */
  function geolocateSuccess(position) {
    geolocateCallbackFunction(position);
  }

  /**
   * Handle geolocation errors.
   */
  function geolocateError(error) {
    if (error.code === 1) {
      // User denied access to their location.
    }
    else if (error.code === 2) {
      // No position could be obtained.
    }
    else {
      // Request for location timed out.
    }
  }

  // Public properties.
  return {

    /**
     * Geolocate user.
     * @param {function} callback - Required: The function to call once 
     * geolocation complete.
     * @param {int} maxAge - Optional parameter for the maximum time in
     * miliseconds we will allow to use a previously calculated location. This 
     * might improve speed in returning a result if we set this value higher as
     * the device wont need to re calculate its position.
     * @param {boolean} highAccuracy - If false we shall approximate user location
     * without using power hungry techniques such as GPS or WiFi. This is fast but 
     * can be inaccurate. If set to true it will try to use hardware on device to
     * better estimate position but this will take longer to get a fix.
     * @param {boolean} continuous - Enable continuous polling of user location.
     * You will receive an update every time their position...