GPS mapping with HTML5 and JavaScript

Will not work on jsFiddle website because the google map api doesn't like the way it's called by jsFiddle. Works on my own localhost sever, fails on jsFiddle

by alano

HTML

<!-- the next line should ideally be in <head> section-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map"></div>
<div>    
    <span id="results"></span>
</div>

CSS

div#map {
    height: 300px;
    width: 400px;
}

JavaScript

//This will not work on jsFiddle website because the google api fails however I try to declare it

var results, map;

function doit() {
    if (navigator && navigator.geolocation) {
        results = document.getElementById("results");
        var myOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        navigator.geolocation.watchPosition(gotLocation, errLocation, {maximumAge:5000});
    }
}

function gotLocation(position) {
    var result = "Latitude: " + position.coords.latitude + "<br/>";
    result += "Longitude: " + position.coords.longitude + "<br/>";
    result += "Accuracy: " + position.coords.accuracy + "<br/>";
    result += "Timestamp: " + position.timestamp + "<br/>";
    results.innerHTML = result;
    var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(point);
    var marker = new google.maps.Marker({
        position: point,
        map: map,
        title: "Location (within " + position.coords.accuracy + "m radius)"
    });

}

function errLocation(error) {
    var result = "Error: " + error.code;
    result += ", " + error.message + "<br/>";
    results.innerHTML = result;
}

window.onload = doit;