Information Technology Reference
In-Depth Information
geoData = navigator.geolocation.watchPosition(onWatchSuccess,
onWatchError, watchOptions);
} else {
geoData = "Your browser does not support HTML5
geolocation";
changeDiv ("myCheckIn",geoData);
}
}
function onWatchSuccess(position) {
var currentLocation = "";
currentLocation = 'Latitude: ' + position.coords.latitude + ',
Longitude: ' +
position.coords.longitude;
changeDiv("myLocationWatch",currentLocation);
}
function onWatchError(error) {
var currentError = "";
currentError = 'Error code: ' + error.code + ', Error message: ' +
error.message;
changeDiv("myLocationWatch",currentError);
}
</script>
</head>
<body>
<h1>
<div id="myLocationWatch">
<!-- This is where your check-in will display -->
<p>Ready to check in...</p>
</div>
<form name="watchFrm">
<input type="button" name="watchBtn" value="Start Watching"
onClick="startWatch()">
</h1>
</body>
</html>
Our utility functions
supportsGeo()
and
changeDiv()
are the same, and the HTML layout
is only cosmetically changed. The key is that the button now calls our
startWatch()
function, which itself ultimately calls
watchPosition()
. We pass it to our regular and
error callbacks-
onWatchSuccess()
and
onWatchError()
—and an options construct. In
this case, our options look like this
var watchOptions = { frequency: 5000 };
This effectively is used to pass a 5 second refresh frequency to the
watchPosition()
function. If you run the code yourself, and choose the Start Watching button you see,
your browser should update approximately every five seconds with your location. This is
a little hard to show in static screen shots, so you'll have to try it for yourself. Don't
worry if you aren't actually moving around: you should still see updates to the
coordinates, because the accuracy of each reading will be slightly different depending
