Skip to content

Instantly share code, notes, and snippets.

@meskarune meskarune/location.html
Last active Aug 29, 2015

Embed
What would you like to do?
Show users current location with coordinates and a map
<!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
You can’t perform that action at this time.