Watching GEO location

by Alex Azuero

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<table>
    <tr>
        <th colspan="2">
Watching the Geo Location API            
        </th>
    </tr>        
        <tr>
            <td>Lat</td>
            <td id="lat"></td>
        </tr>
        <tr>
            <td>Lon</td>
            <td id="lon"></td>
        </tr>
        <tr>
            <td>Accuracy</td>
            <td id="a"></td>
        </tr>      
        <tr>
            <td>Speed</td>
            <td id="s"></td>
        </tr>
        <tr>
            <td>Altitude</td>
            <td id="alt"></td>
        </tr> 
        <tr>
            <td>Last updated</td>
            <td id="t"></td>
        </tr> 
         <tr id="errRow">
            <td>Error</td>
            <td id="error"></td>
        </tr> 
        <tr id="mapRow">
            <td colspan="2"><div id="map"></div></td>        
        </tr>     
</table>

CSS

*{margin:0;padding:0;font-family:arial;}
body{padding:50px;background:#000;}
table{width:100%;border-collapse:collapse;background:#fff;}
td,th{border:solid 1px #000; padding:2px 10px;}
th{padding:5px; text-align:center;font-weight:bold; font-size:18px;}
tr td:first-child{text-align:right;font-weight:bold;}
table tr td:last-child{font-style:italic;}
#errRow{color:red;}
#mapRow td{padding:0;}
#map{ height: 300px; width:100%;}
tr.history td{font-size:12px;text-align:center;}

JavaScript

var updateGEO = function(p) {
    $('#lat').text(p.coords.latitude);
    $('#lon').text(p.coords.longitude);
    $('#a').text(p.coords.accuracy);
    $('#s').text(p.coords.speed);
    $('#alt').text(p.coords.altitude);
    var t = new Date();
    $('#t').text(t.toUTCString());
    buildMap(p.coords.latitude, p.coords.longitude);
    $('table').append('<tr class="history"><td colspan="2">'+p.coords.latitude+' '+p.coords.latitude+' '+p.coords.accuracy+' '+t.toUTCString()+'</td></tr>')
};

var handleErrors = function(error) {
    /*******************************************
     const unsigned short PERMISSION_DENIED = 1;
     const unsigned short POSITION_UNAVAILABLE = 2;
     const unsigned short TIMEOUT = 3;
     *******************************************/
    if (error.code > 0) {
        $('#error').text(error.message);
    }
};

var setGEOListener = function() {
    if (!!navigator.geolocation) {
        var watcher = navigator.geolocation.watchPosition(
        updateGEO, handleErrors, {
            enableHighAccuracy: true,
            maximumAge: 1000, //ms until forced refresh
            timeout: 1000 //ms for request timeout
        });
    } else {
        $('#error').text("Geo location is not supported");
    }
};

$(document).ready(function() {
    setGEOListener();
});

var map, marker, buildMap = function(latitude, longitude) {
    var posLatLong = new google.maps.LatLng(latitude, longitude);
    var o = {
        center: posLatLong,
        zoom: 18,
        disableDefaultUI: true,     
        disableDoubleClickZoom: true,
        draggable: false,
        keyboardShortcuts : false,    
        scaleControl : false,
        scrollwheel : false,
        streetViewControl : false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), o);
    marker = new google.maps.Marker({
        map: map,
        draggable: true,
        animation: google.maps.Animation.BOUNCE,
        position:...