HTML5 geolocation

This is a quick demonstration of the proposed HTML 5 standard for a Geolocation API.

properties:

• latitude
• longitude
• altitude (optional)
• accuracy
• altitudeAccuracy (optional)
• heading (optional)
• speed (optional)
• timestamp

<script src='http://maps.google.com/maps/api/js?sensor=true'></script>
<script>
if(navigator.geolocation) {
       
function hasPosition(position) {
        var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
           
        myOptions = {
            zoom: 15,
            center: point,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         },
           
        GeoMap = document.getElementById('GeoMap'),
        map = new google.maps.Map(GeoMap, myOptions),
           
        marker = new google.maps.Marker({
            position: point,
            map: map,
            title: 'You are here'
        });
			
	var str = '';
        str += 'Your latitude: ' + position.coords.latitude + '<br />';
        str += 'Your longitude: ' + position.coords.longitude + '<br />';
        str += 'Your altitude: ' + position.coords.altitude + '<br />';
        str += 'Accuracy: ' + position.coords.accuracy + '<br />';
        str += 'Altitude accuracy: ' + position.coords.altitudeAccuracy + '<br />';
        str += 'Heading: ' + position.coords.heading + '<br />';
        str += 'Speed: ' + position.coords.speed + '<br />';
        str += 'Retrieved at: ' + position.timestamp;
        document.getElementById('GeoResults').innerHTML = str;

    }
    navigator.geolocation.getCurrentPosition(hasPosition);
}    
</script>

<style>
#GeoMap {
    width:600px;
    height:400px;
}
</style>

<div id='GeoMap'></div>
<div id='GeoResults'></div>

Related Posts