Polylines angularjs setVisible: not a boolean - angularjs

Question

I'm trying to implement polylines into my map application, I get dynamics latlng and push them into an array of polylines,but I'getting an error that I don't know why:
Error: setVisible: not a boolean
but the visible is set to true, what is wrong with it?
var x = 0;
$scope.enderecos.forEach(function (posicao) {
$scope.markers.push({
id: x,
coords: {
latitude: parseFloat(posicao.latitude),
longitude: parseFloat(posicao.longitude)
}
});
$scope.polylines.push({
id: x,
path:[{
latitude: parseFloat(posicao.latitude),
longitude: parseFloat(posicao.longitude)
}],
stroke: {
color: '#6060FB',
weight: 4
},
editable: true,
draggable: false,
geodesic: false,
visible: true
});
x++;
});
html:
<div class="angular-google-map-container">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events"
control="googlemap">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions"
closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
<ui-gmap-polylines models="polylines" path="'path'" stroke="'stroke'" visible="'visible'"
geodesic="'geodesic'" editable="'editable'" draggable="'draggable'" static="true">
</ui-gmap-polylines>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'"
events="markers.events"></ui-gmap-markers>
</ui-gmap-google-map>
</div>
This is my complete mapController:
.controller('MapController', function ($scope, uiGmapGoogleMapApi, $stateParams, uiGmapIsReady, ShowList) {
var viagens_id = $stateParams.viagens_id;
ShowList.enderecoViagem(viagens_id).then(function (listview) {
$scope.enderecos = listview;
$scope.MapOptions = {
minZoom: 3,
zoomControl: false,
draggable: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
disableDoubleClickZoom: false,
keyboardShortcuts: true,
markers: {
selected: {}
},
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "transit",
elementType: "all",
stylers: [{
visibility: "off"
}]
}]
};
uiGmapGoogleMapApi.then(function (maps) {
maps.visualRefresh = true;
$scope.googlemap = {};
$scope.map = {
center: {
latitude: $scope.enderecos[0].latitude,
longitude: $scope.enderecos[0].longitude
},
zoom: 12,
pan: 1,
options: $scope.MapOptions,
control: {},
events: {
tilesloaded: function (maps, eventName, args) {
},
dragend: function (maps, eventName, args) {
},
zoom_changed: function (maps, eventName, args) {
}
}
};
});
$scope.windowOptions = {
show: false
};
$scope.onClick = function (data) {
$scope.windowOptions.show = !$scope.windowOptions.show;
console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
console.log('This is a ' + data);
//alert('This is a ' + data);
};
$scope.closeClick = function () {
$scope.windowOptions.show = false;
};
$scope.title = "Window Title!";
$scope.markers = [];
$scope.polylines = [];
var x = 0;
$scope.enderecos.forEach(function (posicao) {
$scope.markers.push({
id: x,
coords: {
latitude: parseFloat(posicao.latitude),
longitude: parseFloat(posicao.longitude)
}
});
$scope.polylines.push({
id: x,
path: [{
latitude: parseFloat(posicao.latitude),
longitude: parseFloat(posicao.longitude)
}],
stroke: {
color: '#6060FB',
weight: 4
},
editable: true,
draggable: false,
geodesic: true,
visible: true
});
x++;
});
$scope.addMarkerClickFunction = function (markersArray) {
angular.forEach(markersArray, function (value, key) {
value.onClick = function () {
$scope.onClick(value.data);
$scope.MapOptions.markers.selected = value;
};
});
};
uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)
.then(function (instances) {
console.log(instances[0].map); // get the current map
})
.then(function () {
$scope.addMarkerClickFunction($scope.markers);
});
});
})

Answer 1

I think that your error is in this line:
<ui-gmap-polylines models="polylines" path="'path'" stroke="'stroke'" visible="'visible'"geodesic="'geodesic'" editable="'editable'" draggable="'draggable'" static="true">
</ui-gmap-polylines>
You put the variable "visible" between two simple quotes " ' ". This transforms the variable visible into the String visible. You are evaluating the string 'visible', not the boolean true
Try this:
<ui-gmap-polylines models="polylines" path="path" stroke="stroke" visible="visible"geodesic="geodesic" editable="editable" draggable="draggable" static="true">
</ui-gmap-polylines>