mie00 · December 24, 2020 10:47
diff --git a/trip.html b/trip.html
 <!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>
	<!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>