Skip to content

Instantly share code, notes, and snippets.

@mie00
Last active December 24, 2020 10:47
Show Gist options
  • Save mie00/d9be2684028fc26a2960f57ae682a73d to your computer and use it in GitHub Desktop.
Save mie00/d9be2684028fc26a2960f57ae682a73d to your computer and use it in GitHub Desktop.
plotting an entire trip using location history from google and google maps javascript api
<!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 `sed -i '1s/^/var points = /' google.js`.
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