Académique Documents
Professionnel Documents
Culture Documents
2. Use HTML5 and javascript to get geolocation (user's position) and find city name.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reverse Geocoding</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
document.getElementById("locationHolder").innerHTML = "Your current location is: (" + lat + ", " +
lng + ")";
codeLatLng(lat, lng)
var imageURL = "http://maps.googleapis.com/maps/api/staticmap?center="+ lat + "," + lng +
"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapHolder").innerHTML = "<img src='" + imageURL + "'>";
}
function errorFunction(){
document.getElementById("locationHolder").innerHTML ="Geocoder failed";
}
function initialize() {
geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
else { message.innerHTML = "Geolocation is not supported by this browser."; }
//city data
// alert(city.short_name + " " + city.long_name)
document.getElementById("countryHolder").innerHTML = "Your current state is: (" +
city.short_name + " " + city.long_name + ")";
} else {
// alert("No results found");
document.getElementById("locationHolder").innerHTML = "No results found";
}
} else {
// alert("Geocoder failed due to: " + status);
document.getElementById("locationHolder").innerHTML = "Geocoder failed due to: " + status ;
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="cityHolder"></div>
<div id="countryHolder"></div>
<div id="locationHolder"></div>
<div id="mapHolder"></div>
</body>
</html>