How to change icon marker with angularjs and google maps - angularjs

Question

im working in phonegap project with angularjs google maps (https://github.com/allenhwkim/angularjs-google-maps)
I need to change default icon marker with custom images.
This is my controller code:
core.js
// Map Markers Controller
app.controller('markersController', function($scope, $compile){
$scope.infoWindow = {
title: 'title',
content: 'content'
};
$scope.markers = [
{
'title' : 'Location #1',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7112, -74.213]
},
{
'title' : 'Location #2',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7243, -74.2014]
},
{
'title' : 'Location #3',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7312, -74.1923]
}
];
$scope.showMarker = function(event){
$scope.marker = $scope.markers[this.id];
$scope.infoWindow = {
title: $scope.marker.title,
content: $scope.marker.content
};
$scope.$apply();
$scope.showInfoWindow(event, 'marker-info', this.getPosition());
}
});
And this is my markers.html
<div ng-controller="markersController" class="map-fullscreen-container">
<map zoom="8" center="[-26.82, -54.84]" class="fullscreen">
<info-window id="marker-info">
<div ng-non-bindable="">
<strong class="markerTitle">{{ infoWindow.title }}</strong>
<div class="markerContent">
<p>{{ infoWindow.content }}</p>
</div>
</div>
</info-window>
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)" >
</marker>
</map>
</div>

Answer 1

If you only have one marker, you can set it up directly on your marker directive:
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)"
icon="yourIconUrl.png" >
</marker>
If you have different markers for each item, the first thing you need to do is to add the icon property to your items:
$scope.markers = [
{
'title' : 'Location #1',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7112, -74.213],
'icon' : 'yourIconUrl.png'
},
{
'title' : 'Location #2',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7243, -74.2014],
'icon' : 'yourIconUrl.png'
},
{
'title' : 'Location #3',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7312, -74.1923],
'icon' : 'yourIconUrl.png'
}
];
Then you need to use it on your html, by adding it to the marker directive:
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)"
icon="{{marker.icon}}" >
</marker>
That's it, hope that helps.
Please refer to the documentation for more info:
https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html