javascriptgoogle-mapsmarkerng-map

NgMap cluster change markers colors after zoom


I want to change the color of the markers. I'm using ng-map to display the map. I'm also using the cluster option in this library.

My problem: I'm able to change the marker color and I can see that, but once I begin zooming, the markers color change to the default one (red color).

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}}" icon="{{p.icon}}"></marker>

</ng-map>

This is the cluster code:

NgMap.getMap().then(function (map) {
                for (var i = 0; i < $scope.paths.length; i++) {
                    var latLng = new google.maps.LatLng($scope.paths[i].positions[0], $scope.paths[i].positions[1]);
                    $scope.dynMarkers.push(new google.maps.Marker({position: latLng}));
                }
                $scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {});
            });

Solution

  • I solved the problem!

    If anyone has the same problem, the solution is in adding the icon filed when pushing new a marker:

    NgMap.getMap().then(function (map) {
                    for (var i = 0; i < $scope.paths.length; i++) {
                        var latLng = new google.maps.LatLng($scope.paths[i].positions[0], $scope.paths[i].positions[1]);
                        $scope.dynMarkers.push(new google.maps.Marker({position: latLng, icon: $scope.paths[i].icon}));
                    }
                    $scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {});
                });