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

HTML5 video, HTML5 encoding, HTML5 doctype, HTML5 structure page