JSFiddle - React, Tailwind, and code Playground

by James Uther

HTML

<script src="http://maps.googleapis.com/maps/api/js?libraries=visualization&amp;sensor=true_or_false"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div id='map-canvas'></div>

CSS

html, body, #map-canvas {
     height: 100%;
     margin: 0px;
     padding: 0px
 }

JavaScript

$(document).ready(function () {
    $.getJSON("https://dl.dropboxusercontent.com/u/<xxx>/LocationHistory.json", function (data) {
        var heatmapData = _.flatten(data)
            .filter(function (i) {
            return i.hasOwnProperty('timestampMs');
        })
            .map(function (c) {
            return new google.maps.LatLng(
            parseFloat(c.latitudeE7) / 10000000, parseFloat(c.longitudeE7) / 10000000);
        });

        var london = new google.maps.LatLng(51.515, -0.101);
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: london,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.STREET
        });

        var pointArray = new google.maps.MVCArray(heatmapData);
        var heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray,
            maxIntensity: 1
        });
        heatmap.setMap(map);
    });
});