Stack two Stack two - 5 months ago 23
AngularJS Question

Add dynamic markers on angular using API v3

I'm trying to add multiple markers dynamically in my map's controller, but I can't get the id to iterate and show all my markers, how can I set it to get all of the markers and show them correctly, The error tha I'm getting is:

Marker model has no id to assign a child to. This is required for performance. Please assign id, or redirect id to a different key

ShowList.enderecoViagem(viagens_id).then(function (listview) {
$scope.enderecos = listview;


uiGmapGoogleMapApi.then(function (maps) {


$scope.googlemap = {};
$scope.map = {
center: {
latitude: $scope.enderecos[0].latitude,
longitude: $scope.enderecos[0].longitude
},
zoom: 14,
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.title = "Window Title!";

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);
});

for(var i = 0; i < $scope.enderecos.length; i++) {


$scope.markers = [];

$scope.markers.push({
id:[i],
latitude: $scope.enderecos[i].latitude,
longitude: $scope.enderecos[i].longitude
});
}

}

Answer

The problem is here:

$scope.markers.push({
    id:[i],
    latitude: $scope.enderecos[i].latitude,
    longitude: $scope.enderecos[i].longitude
});

Where you're specifying the id attribute, you've got it wrapped in the array shorthand, [ ]

This only makes sense if you're actually accessing an array value, e.g. where you do enderecos[i].latitude. Or if you're trying to pass an array to the id attribute, but I'm pretty sure it'll be expecting a simple string or integer.

Just change it to this and you should be fine:

$scope.markers.push({
    id: i,
    latitude: $scope.enderecos[i].latitude,
    longitude: $scope.enderecos[i].longitude
});