Skip to content

Instantly share code, notes, and snippets.

@devdattaT
Last active October 26, 2024 19:51
Show Gist options
  • Save devdattaT/018f7fc153d9a82d83775351576965f3 to your computer and use it in GitHub Desktop.
Save devdattaT/018f7fc153d9a82d83775351576965f3 to your computer and use it in GitHub Desktop.
How to Visualize your Google Location History

Google is extremely transparent about the Location History it has on you. You can check it out on the timeline feature in the Google Maps application on the phone, or on https://www.google.com/maps/timeline It is possible that you have that turned off, and in that case, consider yourself lucky.

If there is data there, you can view it online, or Download and Analyze it yourself.

Note: The conversion script has been updated on 2024-06-24, to match the updated format which is now generated by Google Takeout

@lsschlieper
Copy link

Not sure if I am doing this right,.. but I had the same issues with the timeline... need to be able to retrace my travels over the past weeks / months. So I tried something: https://github.com/usbrpa/timeline2map Feel free to have a look.

just logged in to say this worked for me. Had to pull out all my timeline history for a court apeal and this tool did the trick. Thanks

@dimisjim
Copy link

Indeed, https://github.com/usbrpa/timeline2map works pretty nicely. thanks @usbrpa

It uses the export straight from your android device settings, rather than the one exported via google itself

@anselm
Copy link

anselm commented Sep 20, 2024

It's easier to ask chatgpt to generate a view that directly reads the json into a map:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Path Map</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <style>
        #map {
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>Location Path Map</h1>
    <div id="map"></div>

    <script>
        // Initialize the map and set its view to a default location (centered on the world)
        const map = L.map('map').setView([0, 0], 2);

        // Add OpenStreetMap tile layer
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);


        // Fetch location-history.json file
        fetch('location-history.json')
            .then(response => response.json())
            .then(data => {
                // Process each item in the data
                data.forEach(item => {
                    if (item.timelinePath) {
                        console.log("fetching",item)
                        const pathPoints = [];
                        item.timelinePath.forEach(point => {
                            // Split the "geo:" coordinates
                            const [lat, lon] = point.point.replace('geo:', '').split(',');

                            // Add the lat/lon as Leaflet LatLng objects to pathPoints
                            pathPoints.push([parseFloat(lat), parseFloat(lon)]);
                        });

                        // Draw a polyline for each timelinePath
                        const polyline = L.polyline(pathPoints, { color: 'blue' }).addTo(map);
                    }

                });

            })
            .catch(error => console.error('Error fetching location-history.json:', error));
    </script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment