Generate Heat-map with lat-lng in angularjs - angularjs

Question

I am using angularjs with mongodb.
I have table which contains user coordinates.
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12T04:44:13.707Z}
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:44:13.707Z}
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:46:59.707Z}
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:47:29.707Z}
I want to display heat map. can anyone point me the best way to achieve this.
I'll have building image which i need to adjust in background later.

Answer 1

Basically you need to map your data to an array of google.maps.LatLng objects. Then init the map, init heatmap layer with mapped data and assign heatmap layer to the map. Check the sample
You need also to include the visualization library, because HeatmapLayer is there.
function initMap() {
/* Data points defined as an array of LatLng objects */
var data = [{
"mac": "aa:22:01:d2:e6:f9",
"lat": 33.53625,
"lng": -111.92674,
"time": '2017-07-12T04:44:13.707Z'
}, {
"mac": "aa:22:01:d2:e6:f9",
"lat": 33.53625,
"lng": -111.92674,
"time": '2017-07-12 04:44:13.707Z'
}, {
"mac": "aa:22:01:d2:e6:f9",
"lat": 33.53625,
"lng": -111.92674,
"time": '2017-07-12 04:46:59.707Z'
}, {
"mac": "aa:22:01:d2:e6:f9",
"lat": 33.53625,
"lng": -111.92674,
"time": '2017-07-12 04:47:29.707Z'
}];
var heatmapData = data.map(function(item) {
return new google.maps.LatLng(item.lat, item.lng)
});
var center = new google.maps.LatLng(33.53625, -111.92674);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData
});
heatmap.setMap(map);
}
.as-console-wrapper{
display:none !important;
}
<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=visualization&callback=initMap"></script>
<div id="map" style="width:500px;height:150px"></div>