<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#mapcanvas { height: 360px; width: 100%}</style>
<script type="text/javascript">
if (window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition(
successCallback, errorCallback);
} else {
alert("!!!Browser doesn't support Geolocation API.");
}
function successCallback(position){
loadmap();
var mylatitude = position.coords.latitude;
var mylongitude = position.coords.longitude;
document.getElementById("latitude").innerHTML
= "latitude: " + mylatitude;
document.getElementById("longitude").innerHTML
= "longitude: " + mylongitude;
document.getElementById("accuracy").innerHTML
= "accuracy: " + position.coords.accuracy;
loadmap(mylatitude, mylongitude);
}
function errorCallback(error) {
alert(error);
}
var map;
function loadmap(mylat, mylong){
var options = {
zoom: 15,
center: new google.maps.LatLng(mylat, mylong),
mapTypeId: google.maps.MapTypeId.SATELLITE,
};
map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}
</script>
</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div id="mapcanvas"></div>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>
next:
- Display Map on webpage to track location
No comments:
Post a Comment