angularjs - ui-gmap-markers and icon changeble for all mark -
i trying change icon every markers on map using ui-google-maps library angular. $scope.map.options.icon
working initialize icon markers.
for api have icon tags not working or somewhere miss something.
<ui-gmap-markers idkey="map.dynamicmarkers.id" models="map.dynamicmarkers" coords="'self'" onmarkerclicked="'onmarkerclicked'" fit="'true'" docluster="'true'" clusterevents="clusterevents" options="map.options" icon="'icon'"> </ui-gmap-markers>
and after data in database fill list of markers in dynamicmarkers object list
dynamicmarkers = $scope.alltrees; $scope.map.options.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png"; _.each(dynamicmarkers, function (marker) { if (marker.status == 0) { marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png"; } else if (marker.status == 1) { marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png"; } else if (marker.status == 2) { marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png"; } }); $scope.map.dynamicmarkers = dynamicmarkers;
for reason icon not change. thanks.
i found solution! first need set icon url on marker.icon
place , not set default icon on map.options.icon
. if set default icon in map.options
, after try set icon inside marker not work!
here working example:
<ui-gmap-markers idkey="map.dynamicmarkers.id" models="map.dynamicmarkers" coords="'self'" onmarkerclicked="'onmarkerclicked'" fit="'true'" docluster="'true'" clusterevents="clusterevents" options="map.options" icon="'icon'"> </ui-gmap-markers>
angular code
dynamicmarkers = $scope.alltrees; // not set default icon mark // $scope.map.options.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png"; _.each(dynamicmarkers, function (marker) { if (marker.status == 0) { marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png"; } else if (marker.status == 1) { marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png"; } else if (marker.status == 2) { marker.icon = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png"; } }); $scope.map.dynamicmarkers = dynamicmarkers;
it catch , works. hope fix bug in next version of angular-google-maps library. try angular-google-maps 2.1.5. chears.
Comments
Post a Comment