Change icon on click using angular-google-maps - angularjs

Question

I have a number of markers on a map using angular-google-maps.
Can someone please tell me how to you change the icon image of a marker when you click on it?
My HTML looks like this:
<div class="map-wrapper" flex>
<ui-gmap-google-map flex center='map.center' zoom='map.zoom' class="ui-gmap-google-map" control="control">
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'" doRebuildAll="true"></ui-gmap-markers>
</ui-gmap-google-map>
</div>
My controller code to populate markers:
function mapFilter(dealerList) {
angular.forEach(dealerList, function (dlr) {
if (dlr.Category_type_id == $scope.categoryType) {
var marker = {
id: dlr.Site_owner_id + "_" + dlr.Site_locationseq,
icon: "/img/dealerlocator/pin_icon.png",
events: {
click: function (marker, eventName, model, arguments) {
gotoAnchor(marker.key);
}
},
latitude: dlr.Site_address_map_latitude,
longitude: dlr.Site_address_map_longitude,
showWindow: false
};
$scope.markers.push(marker);
}
});
}
function gotoAnchor(x) {
var newHash = 'anchor_' + x;
if ($location.hash() !== newHash) {
// set the $location.hash to `newHash` and
// $anchorScroll will automatically scroll to it
$location.hash('anchor_' + x);
// Update the map marker icons
angular.forEach($scope.markers, function (mkr) {
if (mkr.id == x) {
mkr.icon = "/img/dealerlocator/pin_icon_selected.png";
} else {
mkr.icon = "/img/dealerlocator/pin_icon.png";
}
});
expandDealer(x);
} else {
// call $anchorScroll() explicitly,
// since $location.hash hasn't changed
$anchorScroll();
expandDealer(x);
}
};
In the gotoAnchor function above, you can see here that I've changed the icon in the markers, but this doesn't change on the map.

Answer 1

You'll need to debug your ($location.hash() !== newHash) to see if its making it through to the forEach. This plunker demo implements the method below, and the icons are updating on click;
function gotoAnchor(x) {
// Update the map marker icons
angular.forEach($scope.randomMarkers, function (mkr) {
if (mkr.id == x) {
mkr.icon = "https://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-ffc11f/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/cserkesz_ikon.png";
} else {
mkr.icon = 'https://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-128e4d/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/crow2.png';
}
});
};