I'm using ng-map
in my web application. In the map view, I display different positions using marker
. I want to change the color of each marker depending the filed isOpned
that I have inside the object from where I get the positions. I tried to add background-color
style to my marker but nothing happened.
This is my code:
<ng-map zoom-to-include-markers="auto"
id="map"
map-type-id="ROADMAP"
street-view-control-options="{position: 'LEFT_CENTER'}">
<marker ng-repeat="p in paths" position="{{p.positions}}"></marker>
</ng-map>
Modifying code from ng maps (as no sample code added in post) this is idea
Plunker demo
JS
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($interval) {
var vm = this;
vm.positions =[
[40.71, -74.21], [40.72, -74.20], [40.73, -74.19], [40.74, -74.18],
[40.75, -74.17], [40.76, -74.16], [40.77, -74.15], [40.77, -74.15]
];
var colorsDynamic=['ff8a80','880e4f','4a148c','311b92','3d5afe','76ff03','f57c00','5d4037']
$interval(function() {
var numMarkers = Math.floor(Math.random() * 4)+4; //between 4 to 8 markers
vm.positions = [];
vm.icon=[];//empty array of icon
for (i = 0; i < numMarkers; i++) {
var lat = 40.71 + (Math.random() / 100);
var lng = -74.21 + (Math.random() / 100);
vm.positions.push([lat, lng]);
//pushing dynamic icon color
vm.icon.push('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|'+colorsDynamic[i])
}
}, 2000);
});
Html
<div ng-controller="mapController as vm">
<ng-map zoom="14" center="[40.71, -74.21]">
<marker ng-repeat="p in vm.positions track by $index" position="{{p}}" icon="{{vm.icon[$index]}}"></marker>
</ng-map>