How to dynamically modify Google Maps Heatmap locations with data from database

Question

I am trying to use angular google maps: https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/

Test data: https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/taxi-data.js

Javascript example:

var taxiData = [
  new google.maps.LatLng(37.782551, -122.445368),
  new google.maps.LatLng(37.782745, -122.444586),
];

I do the query with AngularJS and retrieve Latitude and Longitude in list data[] for example.

How can I dynamically modify the code above so it "initializes" new google.maps.LatLng with my data from DB?

Example of what I had in my had in pseudocode:

var data = [];
var taxiData = [];

//angular call to store data, so we have data:

data = someCall..

Dynamically add instances into taxiData list:

for (var i = 0; i < data.length; i++) {
    taxiData.push(new google.maps.LatLng(data[i].Latitude, data[i].Longitude));
}

Answer 1

Assuming your db data is accessible via http get in json format ( in the below example the data is retrieved from taxiData.json file ), the following example demonstrates how to initialize heatmap layer once the data is loaded.

Example

 angular.module('mapApp', ['ngMap']) .controller("MapCtrl", function($scope,$http,NgMap){ $scope.taxiData = []; NgMap.getMap().then(function(map) { $scope.taxiData = []; $http.get('https://rawgit.com/vgrem/6d9c464ab034f5b93295/raw/9ca3819aa8270823da64cba6f91d24945cc52940/taxiData.json').success(function(data) { $scope.taxiData = data.map(function(item){ return new google.maps.LatLng(item.lat, item.lng); }); var layer = $scope.map.heatmapLayers.taxiDataMap; layer.setData($scope.taxiData); }); }); }); 

 <script src="https://maps.google.com/maps/api/js?libraries=visualization"></script> <script src="https://code.angularjs.org/1.3.15/angular.js"></script> <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> <div ng-app="mapApp" ng-controller="MapCtrl"> <ng-map zoom="13" center="37.774546, -122.433523" map-type-id="SATELLITE"> <heatmap-layer id="taxiDataMap" data="taxiData"></heatmap> </ng-map> </div> 

JSFiddle