Skip to content

Instantly share code, notes, and snippets.

@vibhasbhingarde

vibhasbhingarde/geolocation.html

Last active August 29, 2015 14:10
Show Gist options
  • Save vibhasbhingarde/c6322ae8578fa5ff4201 to your computer and use it in GitHub Desktop.
Save vibhasbhingarde/c6322ae8578fa5ff4201 to your computer and use it in GitHub Desktop.
Download ZIP
Get user's geolocation without using any paid service
Raw
geolocation.html
<!-- need to add jquery and jquery.cookie.js-->
<body onload="loadLocation()">
<div id="container">
<div class="inner-container">
<div class="box box-50">
<div class="boxin">
<div class="header">
<h3>HTML5 Geo-Location</h3>
</div>
<div class="content">
<ul class="simple">
<li class="even">
<strong><span id="status"></span></strong>
</li>
<li class="odd">
<strong>Your Latitude</strong>
<span id="latitude"></span>
</li>
<li class="even">
<strong>Your Longitude</strong>
<span id="longitude"></span>
</li>
<li class="odd">
<strong>Accuracy (in Meters)</strong>
<span id="accuracy"></span>
</li>
</ul>
<div id="placeholder" style="margin: 20px 0px 10px; padding-left: 20px; width: 100%; height: 100%; position: relative;">
<i>Note: May take a few seconds to get the location.</i>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var latitude;
var longitude;
var accuracy;
function loadLocation() {
if(navigator.geolocation) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
document.getElementById("status").style.color = "#1ABC3C";
if($.cookie("posLat")) {
latitude = $.cookie("posLat");
longitude = $.cookie("posLon");
accuracy = $.cookie("posAccuracy");
document.getElementById("status").innerHTML = "Location data retrieved from cookies. <a id=\"clear_cookies\" href=\" javascript:clear_cookies();\" style=\"cursor:pointer; margin-left: 15px;\"> clear cookies</a>";
updateDisplay();
} else {
navigator.geolocation.getCurrentPosition(
success_handler,
error_handler,
{timeout:10000});
}
}
}
function success_handler(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
accuracy = position.coords.accuracy;
if (!latitude || !longitude) {
document.getElementById("status").innerHTML = "HTML5 Geolocation supported, but location data is currently unavailable.";
return;
}
updateDisplay();
$.cookie("posLat", latitude);
$.cookie("posLon", longitude);
$.cookie("posAccuracy", accuracy);
}
function updateDisplay() {
//var gmapdata = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;ie=UTF8&amp;hq=&amp;ll=' + latitude + ',' + longitude + '&amp;output=embed"></iframe>';
var gmapdata = '<img src="http://maps.google.com/maps/api/staticmap?center=' + latitude + ',' + longitude + '&zoom=16&size=425x350&sensor=false" />';
document.getElementById("placeholder").innerHTML = gmapdata;
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
document.getElementById("accuracy").innerHTML = accuracy;
}
function error_handler(error) {
var locationError = '';
switch(error.code){
case 0:
locationError = "There was an error while retrieving your location: " + error.message;
break;
case 1:
locationError = "The user prevented this page from retrieving a location.";
break;
case 2:
locationError = "The browser was unable to determine your location: " + error.message;
break;
case 3:
locationError = "The browser timed out before retrieving the location.";
break;
}
document.getElementById("status").innerHTML = locationError;
document.getElementById("status").style.color = "#D03C02";
}
function clear_cookies() {
$.cookie('posLat', null);
document.getElementById("status").innerHTML = "Cookies cleared.";
}
</script>
Reference link : http://www.codediesel.com/javascript/adding-html5-geolocation-to-your-applications/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment