Display Current Location to Image in Geolocation
<html>
<head>
<title>Display Current Location to Image in Geolocation</title>
</head>
<body>
<input type="button" value="Show My Position" onclick="display()">
<br>
<div id="result"></div>
<script type="text/javascript">
function display() {
navigator.geolocation.getCurrentPosition(
function (position) {
var location = position.coords.latitude + ',' + position.coords.longitude;
var img_url = 'http://maps.googleapis.com/maps/api/staticmap?center='+location+'&zoom=14&size=400x300&sensor=false';
document.getElementById('result').innerHTML = '<img src="'+img_url+'">';
},
function (error) {
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById('result').innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
document.getElementById('result').innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
document.getElementById('result').innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
document.getElementById('result').innerHTML = "An unknown error occurred."
break;
}
}
);
}
</script>
</body>
</html>
Run Application
Open site in browser and display as below:
