How to colorize ng-map markers based on categories

Question

I have this functionality which renders near bay locations based on your position and selected radius. Those near bay locations have different categories and now i wan't to colorize markers based on those categories.

This is my current code so data is showed

$scope.radius = 10;
nearBaysFactory.getNearBayInRadius(data.basicData[0].latitude, data.basicData[0].longitude, $scope.radius).then(function (data) {
    $scope.nearNearBays = data.nearBays;
    NgMap.getMap().then(function(map) {
    });
});

$scope.showSites = function (evt, id) {
    angular.forEach($scope.nearNearBays, function(value){
        if (value.id_near_bay == id) {
            $scope.selectedSite =
                value.name + "<br>" +
                value.address + "<br>" +
                "Category: " + value.category;
        }
    });
    $scope.showInfoWindow.apply(this, [evt, 'bar-info-window']);
};

My html

<ng-map id="custom" default-style="false"
        center="46.1478781,14.4326283" zoom="9">
    <!-- this marker should be red as it is by default -->
    <marker position="{{location.basicData[0].latitude}},{{location.basicData[0].longitude}}" id="{{$index}}"
            on-click="showSites(event, n.id_location)">
    </marker>
    <!-- Those markers should be different colors based on near bay category -->
    <marker ng-repeat="n in nearNearBays" position="{{n.latitude}},{{n.longitude}}" id="{{$index}}"
            on-click="showSites(event, n.id_near_bay)" color="blue">
    </marker>
    <info-window id="bar-info-window">
        <div ng-non-bindable>
            <div id="siteNotice"></div>
            <h1 id="firstHeading" class="firstHeading" style="font-size: 17px;">
                <div ng-bind-html="selectedSite"></div>
            </h1>
            <div id="bodyContent">
                <p>
                    <a href="/#/nearbays/nearbay/{{selectedSite.id_near_bay}}">Open near bay</a>
                </p>
            </div>
        </div>
    </info-window>
</ng-map>

And this is current result

And this is an example of one near bay objects

$scope.test = [
    {
        name: 'name 1',
        address: 'Address 1',
        id_resort_category: '8',
        category : 'Towing service'
    },
    {
        name: 'name 2',
        address: 'Address 2',
        id_resort_category: '1',
        category : 'Spa'
    }
];

So what i'm searching is some suggestions, way of implementation, how to achieve to render those near bay markers different color based on his category. If you need any additional information's, please let me know and i will provide. Thank you

Answer 1

So i did it this way... I have added icon url or some absolute path

$scope.test = [
    {
        name: 'name 1',
        address: 'Address 1',
        id_resort_category: '8',
        category : 'Towing service'
        img: 'http://www.iconarchive.com/download/i2262/aha-soft/food/hamburger.ico'
    },
    {
        name: 'name 2',
        address: 'Address 2',
        id_resort_category: '1',
        category : 'Spa',
        img: 'http://www.iconarchive.com/download/i2262/aha-soft/food/hamburger.ico'
    }
];

Then you can set marker ico location in my case it looks like this

<marker ng-repeat="n in nearNearBays" position="{{n.latitude}},{{n.longitude}}" icon="dist/img/googleMapsIcons/{{n.image}}">
</marker>

Answer 2

In your code you can use a condition statement to set the icon property on the marker.

You can find the different icons here