Skip to content

Instantly share code, notes, and snippets.

@meskarune

meskarune/location.html

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save meskarune/9590484 to your computer and use it in GitHub Desktop.
Save meskarune/9590484 to your computer and use it in GitHub Desktop.
Download ZIP
Show users current location with coordinates and a map
Raw
location.html
<!DOCTYPE html>
<HTML>
<BODY onload="showlocation()">
<h1>Your current location is:</h1>
<p>Latitude: <span id="latitude">..</span>&nbsp;&nbsp;&nbsp;&nbsp;
Longitude: <span id="longitude">..</span></p>
<div id="mapholder"></div>
<SCRIPT>
var map=document.getElementById("mapholder");
function showlocation(){
if (navigator.geolocation) {
navigator.geolocation.watchPosition(callback,showError);
}
else{map.innerHTML="Geolocation is not supported by this browser.";}
}
function callback(position){
document.getElementById('latitude').innerHTML=position.coords.latitude;
document.getElementById('longitude').innerHTML=position.coords.longitude;
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=10&markers="
+latlon+"&size=600x400&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
map.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
map.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
map.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
map.innerHTML="An unknown error occurred."
break;
}
}
</SCRIPT>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment