-
-
Save abom/a028f6fe5ab8232ccaaae4b6a85d566b to your computer and use it in GitHub Desktop.
plotting an entire trip using location history from google and google maps javascript api
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<!-- | |
usage: | |
1. install jq for json parsing. | |
2. go here https://takeout.google.com/settings/takeout and download "Location history" in json format and save it as location.json. | |
3. run `cat location.json|jq '.locations | map(select(has("accuracy"))) | map({lat: (.latitudeE7 / 10000000), lng: (.longitudeE7 / 10000000), accuracy: .accuracy, timestamp: (.timestampMs | tonumber / 1000)})' > google.json` | |
4. cp google.json google.js. | |
5. add `var points = ` to the beginning of google.js file. | |
6. get your javascript api key from google maps: https://developers.google.com/maps/documentation/javascript/get-api-key | |
7. replace `ADD_YOUR_KEY` with your key. | |
8. go to index.html from your browser. | |
--> | |
<head> | |
<style> | |
#map { | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
position: absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<!--The div element for the map --> | |
<div id="map"></div> | |
<script src="google.js"></script> | |
<script> | |
var mypoints = getPoints(); | |
function initMap() { | |
var center = { lat: 47.371358, lng: 8.0592448 }; | |
// create a closed shape | |
var p = mypoints.concat([mypoints[0]]); | |
var map = new google.maps.Map( | |
document.getElementById('map'), { zoom: 5, center: center}); | |
var flightPath = new google.maps.Polyline({ | |
path: p, | |
geodesic: true, | |
strokeColor: '#FF00A8', | |
strokeOpacity: 1.0, | |
strokeWeight: 4 | |
}); | |
flightPath.setMap(map); | |
} | |
// copied from https://www.geodatasource.com/developers/javascript | |
function distance(lat1, lon1, lat2, lon2, unit) { | |
if ((lat1 == lat2) && (lon1 == lon2)) { | |
return 0; | |
} | |
else { | |
var radlat1 = Math.PI * lat1 / 180; | |
var radlat2 = Math.PI * lat2 / 180; | |
var theta = lon1 - lon2; | |
var radtheta = Math.PI * theta / 180; | |
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); | |
if (dist > 1) { | |
dist = 1; | |
} | |
dist = Math.acos(dist); | |
dist = dist * 180 / Math.PI; | |
dist = dist * 60 * 1.1515; | |
if (unit == "K") { dist = dist * 1.609344 } | |
if (unit == "N") { dist = dist * 0.8684 } | |
return dist; | |
} | |
} | |
function getPoints() { | |
var mypoints = points.filter(x => true) | |
// remove points with low accuracy | |
mypoints = mypoints.filter(x => x.accuracy < 200); | |
return mypoints | |
} | |
</script> | |
<script async defer src="https://maps.googleapis.com/maps/api/js?key=ADD_YOUR_KEY&callback=initMap"> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment