Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 GPS tracker
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 GPS</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="index.js"></script>
</body>
</html>
var map
, you
, pos
, t_0
, log = ''
, url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sBHxAxMpOb3XcAAAOBSURBVDjLfZRNa1xlGIav877nY2bOzJnMR77TNIkJpSpBW4qiGGJAECpSEFz0D/gDKrp9wVVBXPkLXLkrqBtBZKJFQaqghbZp09SkTUwyH5mvMzPnvHPOcZEUumj6wL17nmvz3PdtcMoopQRg27btdpYvXQSS7N9/3NZaB0BHKTV83p3xHJAFzFQWVj4bdPjonGsXisIwm35Iy2C40dON0VHrxurD9evAvlKqfypQKeW15l9d/enI+9qr+2fWXplmcbpA0UtT6wx48OSIu4/r3Nqqkjs3tvN+/uiat31vHagppRIA8xnYBPnShRub1reiUU0vX5gnPTlKfjzPzEiKIBPg4GDFNrlmwJ2bW7O981PfXM1mP7b73T+B/wDECSwTRdHi9/L8V9t399Le3BSMT0B+BDIukWkTp1ySfIF4bJzk7ByMlfn3zl76x/RrXwohlpRSRQCplDKAs9uzF6/+/Oveh1GpyOjSAsWJUUbyOTK2hU4EDS05HNocxDYHkaQRG9Dr03hULU8vz9e9o92ttbW1ugA8YGrTz7wT6JhkbJJBdoSelaMTSGoD2O1DLYB2CD1t03dKUJyAyUmCgWbTz6w4jlMA0ibgSim9Wms4S2EEcnk6Ikd7KKkDMoaUgC5QF9CS0MWEdB68IhQK1FrRDIICkDUBUwhh+M3Aw3XBcakmKUoGuAZEBlgG9CVUTWiY0JaAnYFUBtwsfifwyJMAlglorXXsOk6bSGbBJLIk94cwAM5YYNvQT6CewKEFiQNoEwwbTBs3JduABnwT8E3T9MuOfLzRjaeIYpAJ2jJ4aMC2AVb62FrBEGILsAGRQJxAklB2zZ1EJwOgJ4DOcDjcfSnT+8XRIQwGEA6ODWXAUELfPlZsnkRBAFpDEOBEmsW0fzMMwyqgZaVSYXV1NSyFh61mbumtvX5SJpuBnAupp04FQqAHBIAP1Jqwf8DreePepc5v16WU95VSwdN1P47jB5ed29fmDO1TrUOtDZ0TSPNEPU7e3YVagzmh/feSW58KITaUUl0ACVCpVKhUKv67b7+xP1/K/NXxs282+kEhiQEtIBTQS+BIw2ELeVDl5V536wNv+xPXf/K7Uqr+oraxgdF19/Lnjyz3is6mygeYaQwYJ+5b3aC2EHa+W/F/+AJoKKX0C+vrGbABpCzLyvqzK8uJIaPcTuWfMAw10D+tD/8H7d6IDx2EfHUAAAAASUVORK5CYII='
, head = '["latitude","longitude","precision","time"]'
, zoom
, time
, from
;
google.maps.event.addDomListener(window, 'load', init);
function init() {
map = new google.maps.Map( document.getElementById('map')
, { zoom: zoom
, mapTypeId: google.maps.MapTypeId.ROADMAP
});
if (navigator.geolocation)
navigator.geolocation.watchPosition(gotPosition, function() {
noGeolocation('Error: The Geolocation service failed.');
}, { enableHighAccuracy: true, maximumAge: 10e3, timeout: 20e3 });
else
noGeolocation('Error: Your browser doesn\'t support geolocation.');
}
function gotPosition(position) {
var at = position.coords
, off = at.accuracy
, z
;
pos = ll(at.latitude, at.longitude);
if (you) you.setPosition(pos); else {
t_0 = Math.round(+new Date / 1000);
you = new google.maps.Marker({ map: map
, position: pos
, icon: marker(url, s(20, 17), p(10, 8))
});
google.maps.event.addListener(you, 'click', function() {
location = 'mailto:?subject=GPS%20Track&body='
+ encodeURIComponent(log + ' ]\n}\n');
});
}
if (!zoom) map.setCenter(pos);
// zoom in, as precision improves (or out again)
if (off > 2e3) z = 15;
if (off < 2e3) z = 16;
if (off < 900) z = 17;
if (off < 100) z = 18;
if (z !== zoom) map.setZoom(zoom = z);
map.panTo(pos);
save(at);
}
function noGeolocation(message) {
var opts = { map: map
, position: ll(60, 105)
, content: message
}
, info = new google.maps.InfoWindow(opts);
map.setCenter(opts.position);
}
function s(w, h) { return new google.maps.Size(w, h); }
function p(x, y) { return new google.maps.Point(x, y); }
function ll(y, x) { return new google.maps.LatLng(y, x); }
function marker(url, size, hotspot, origin) {
return new google.maps.MarkerImage(url, size, origin || p(0, 0), hotspot);
}
function save(at) {
var lat = at.latitude.toFixed(6) // decimeter precision should be quite enough
, lng = at.longitude.toFixed(6)
, pre = at.accuracy.toFixed(0)
;
time = Math.round(new Date / 1000) - t_0;
log += (log ? ' ,' : '{"time":'+ t_0 +'\n,"head":\n '+ head +'\n,"data":\n [')
+ '[' + lat +','+ lng +','+ pre +','+ time +']\n';
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
@media print {
html, body {
height: auto;
}
#map {
height: 650px;
}
}
@nikhildhar1992

This comment has been minimized.

Copy link

@nikhildhar1992 nikhildhar1992 commented Apr 15, 2016

which file to run first @johan

@tharwat300

This comment has been minimized.

Copy link

@tharwat300 tharwat300 commented Oct 5, 2017

I executed the previous code.
Nothing appeared in the browser

What is the problem?

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jan 19, 2018

This is not showing GPS tracking.
This is just showing your current location.
Also please provide read me file.

@cipto-hd

This comment has been minimized.

Copy link

@cipto-hd cipto-hd commented Apr 30, 2018

@tharwat300; you should add gmap key like below, create googple project and then gmap api, you will get the api key, <script src="https://maps.googleapis.com/maps/api/js?key=AsgdsgsgIzaSyDXWAdr5dTvEojqcKhKwCDj0Uvu_CnMgdMF8"></script>

@ngicin

This comment has been minimized.

Copy link

@ngicin ngicin commented Aug 11, 2018

Yessss. It's working only on https sites. Replace the code in index.html file

<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>

with your own API code

<script src="https://maps.googleapis.com/maps/api/js?key=ENTER_YOUR_API_CODE_HERE"></script>
@TurkisHackers

This comment has been minimized.

Copy link

@TurkisHackers TurkisHackers commented Aug 27, 2018

PLEASE HELP FOR THİS
http://erbilen.net/demo/geolocation/test.html
how can ı send the results to a file ?
example:
I AM CLİCKİNG THİS LİNK
AND CLİCKİNG TO THİS BUTTON
AND RESULTS ARE COMİNG AND THİS RESULTS İS LOGGİNG TO LOG.TXT
PLEASE HELP ME FOR THİS ? :(

@sudhanshu4441

This comment has been minimized.

Copy link

@sudhanshu4441 sudhanshu4441 commented Nov 6, 2018

Thanks @johan

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.