Create your own HeatMap

As long as your phone has location data turned on, you’ll be able to create a heat map to visualize your location history as well.

Here are the three things you’ll need:

1) Your Google Location History — You can download the .json file from Google Takeout. After visiting that link, click on the Select None button to unselect everything. Then, scroll down to and select Location History.

Finally, select Next and start your download. It make take a while for Google to prepare your data, but they will email you when it is ready for download.

Note: If you have an Android Phone your data should be being saved by google automatically. If you use an iPhone, You may need to turn this feature on.

2) A Google Maps API Key — You can create your API Key Here. Simply click on the Get A Key button then click Create A New Project. Once you’ve named your project (whatever you want) you can select Create And Enable API.

3) The Code — You can download the code from the GitHub Repo Here.

Putting it all together

Once you have all three ingredients above, we can put everything together! There are only three steps:

1) Navigate to the folder with the code in the console and run npm install . This will install the dependencies for the project.

2) Open index.html in your favorite code editor. We’re interested in line 103:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=visualization&callback=initMap">

All you need to do is remove the YOUR_API_KEY_HERE and replace it with your Google Maps API Key! Take care to paste between the = and the & .

3) Find where you downloaded your Location History JSON file. Rename that file to location.json . Once you’ve renamed it, you can copy it into the public directory/folder of the project.

4) Go back into the console and start your server with node app.js . This will serve the project on your local machine on port 3000.

5) Navigate to localhost:3000 in your browser and enjoy your heatmap!

Note: Depending on the size of your JSON file, it may take some time for you map to populate

Playing around with your HeatMap

Because different people have traveled more/less than others, I built some custom controls into the map. They’re located at the top:

Radius — Changes the radius of each data point. Range 0–50.

Intensity — Changes the maximum intensity of the data. Range 0–1000.

Opacity — Changes the opacity of the HeatMap overlay. Range: 0–1.

Different combinations work better than others depending on your zoom level and total location data. I recommend playing around with your data until you find something that fits well.

If you want some visual tips, check out the three Bangkok HeatMaps below. All three are the same data, just different settings: