I'm struggling to integrate NgMaps with Heatmaps from the Google Maps API.
When I load the data from a script tag, everything works smoothly, similar to the NgMap example.
However, if I attempt to create the data array locally, it fails and throws an error stating,
invalid heatmap data <heatmap-layer id="foo" data="pointArray">The goal is to update the array dynamically and refresh both the map and heatmap as needed.
This is my current approach:
HTML:
<ng-map center="21.088513,92.197204" zoom="16" map-type-id="SATELLITE" >
<heatmap-layer id="foo" data="pointArray"></heatmap-layer>
</ng-map>
AngularJS:
$scope.outbreak = [
[21.088, 92.19862],
// other coordinates here
[21.09083, 92.19574]
];
$scope.renderHeatMap = function() {
var heatmap, vm = this;
NgMap.getMap().then(function(map) {
var outbreakfin = [];
for (var i in $scope.outbreak) {
outbreakfin.push(new google.maps.LatLng($scope.outbreak[i][0], $scope.outbreak[i][1]));
};
var pointArray = new google.maps.MVCArray(outbreakfin);
heatmap = map.heatmapLayers.foo;
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
});
};
I suspect that the heatmap layer isn't loading when expected.
What am I overlooking?