Information Technology Reference
In-Depth Information
on number of GPS satellites used for the fix, varying local interference, etc. You should
see small changes to the least significant digits even if you are relaxing on your sofa!
Expanding Your Horizons with Maps
By now you will almost certainly agree that our example application is not exactly a work
of art. So let's add a bit of pizzazz, and introduce the near-ubiquitous accompaniment to
geolocation: maps!
Adding a Map to Our Application
Our latest example is from file ch09-example06.html, which uses Google Maps to take
our earlier check-in example to the next level. Instead of just reporting numeric co-
ordinates, it uses them with the Google Maps API hosted at
http://maps.googleapis.com/
to
load a map, and place a marker on it highlighting your
location. Listing 9-5 is our modified JavaScript, CSS and HTML5.
Listing 9-5.
Geolocation and Maps working together
<html>
<head>
<title>Android Web Application Development-Geolocation example 6</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#mapContainer { height: 100% }
</style>
<script type="text/javascript"
sensor=false
">
</script>
<script type="text/javascript">
function supportsGeo () {
if (navigator.geolocation) {
return true;
} else {
return false;
}
}
function changeDiv (name, data) {
var div = document.getElementById(name);
if(div)
{
div.innerHTML = data;
}
}
function mapMe(thisLat, thisLong) {
var myLatlong = new google.maps.LatLng(thisLat, thisLong);
var myOptions = {
center: new google.maps.LatLng(thisLat, thisLong),
