-
-
Save johan/3148792 to your computer and use it in GitHub Desktop.
<!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; | |
} | |
} |
This is not showing GPS tracking.
This is just showing your current location.
Also please provide read me file.
@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>
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>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 ? :(
Thanks @johan
It shows error that google Maps cant be downloaded properly ? what should I do? plz guide me
I executed the previous code.
Nothing appeared in the browser
What is the problem?