Geolocation Step 4 - Simple Working

Geolocation Tutorial - Step 4. A simple working Geolocation component in action.

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>
    <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}

JavaScript

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

  /**
   * The callback function upon receiving Geolocation data.
   */
  var geolocateCallbackFunction = 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.
     */
    geolocate: function(callback) {
      geolocateCallbackFunction = callback;

      if (isSupported()) {
        navigator.geolocation.getCurrentPosition(geolocateSuccess,
          geolocateError);
      }
    },

    /**
     * Another public function.
     */
    anotherPublicFunction: function() {

    }

  };

}();

// Lets try it out as this basic example should now work!
geoComponent.geolocate(function(data){
  document.getElementById('geoResults').innerHTML = '<ul>' +
      '<li>Latitude: ' + data.coords.latitude + '</li>' +
      '<li>Longitude: ' + data.coords.longitude + '</li>' +
      '<li>Accuracy: ' + data.coords.accuracy + '</li>' +
      '<li>Altitude: ' + data.coords.altitude + '</li>' +
      '<li>Altitude Accuracy: ' + data.coords.altitudeAccuracy + '</li>' +
      '<li>Heading: ' + data.coords.heading + '</li>' +
      '<li>Speed: ' +...