HTML and CSS Reference
In-Depth Information
navigator.getCurrentPosition(showCurrentPosition,
handleLocationError);
}
break;
case error.TIMEOUT:
/**
* Appologizies to the user for the delay and attempts
* to retrieve their location again
*/
navigator.geolocation.getCurrentPosition(showCurrentPosition,
handleLocationError);
break;
}
}
These are very simple error handlers and they can be expanded upon to give a
much better experience to users, should an error occur.
You can then pass the coordinates onto a mapping service, such as Google
Maps, to show the user's current location. The following example uses the
Google Maps static API to generate an image of the user's current location to be
displayed on the mobile device.
<img src="/map.jpg" id="map" alt="Map" />
<script>
var showCurrentPosition = function(position){
document.getElementById('map').src =
' http://maps.google.com/maps/api/staticmap?center=' +
position.coords.latitude + ',' + position.coords.longitude +
'&zoom=10&markers=' + position.coords.latitude + ',' +
position.coords.longitude + '&size=' + window.innerWidth + 'x' +
window.innerHeight + '&sensor=true';
}
var handleLocationError = function(error){
alert(error.message);
}
navigator.geolocation.getCurrentPosition(showCurrentPosition,
handleLocationError);
</script>
The result can be seen in Figure 7-3. You can, of course, also subscribe to
significant changes to the user's current position. You can do this with the
navigator.geolocation.watchPosition method. This will listen for significant
changes to the user's current position, and call a callback function every time
the user's position changes. The watchPosition method takes the same
parameters as the getCurrentPosition method.
Search WWH ::




Custom Search