I am using ng-map for pointing location. It's working fine but All maps denoted by same icons. So I need to point out each location with different icons. How to achieve this process?
I am getting this output with the same red icon and I enabled this output screenshot
I need to expect this kind of output with a different icon. Please see below attached Images
How to get this different icon for denoting location in angularjs ng-map
This is my angular js front code
<body ng-controller="heatmapsCtrl as vm">
<ng-map style="height:500px;" zoom="15" center="[37.782551, -122.442815]" map-type-id="TERRAIN">
<marker icon="{{vm.getIcon(school)}}" ng-repeat="p in points" position="{{p}}" ></marker>
</ng-map>
This is my Controller Code
var heatmap, vm = this;
vm.toggleHeatmap = function (event) {
heatmap.setMap(heatmap.getMap() ? null : vm.map);
};
vm.changeGradient = function () {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
vm.changeRadius = function () {
heatmap.set('radius', heatmap.get('radius') ? null : 20);
}
vm.changeOpacity = function () {
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}
$scope.points = [
["37.782551", "-122.445368"]
["37.782745", "-122.444586"]
["37.782842", "-122.443688"]
["37.782919", "-122.442815"]
["37.782992", "-122.442112"]
["37.783206", "-122.440829"]
["37.783273", "-122.440324"]
["37.783316", "-122.440023"]
["37.783357", "-122.439794"]
["37.783371", "-122.439687"]
["37.783368", "-122.439666"]
["37.783383", "-122.439594"]
];
