Add dynamic markers on angular using API v3

Question

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

       }

possible duplicate of AngularJS with angular-google-maps: Add Marker through fomr and Find me — not_a_bot
– not_a_bot, Commented Mar 25, 2015 at 20:09
$scope.enderecos = listview; - what does listview look like? — duncan
– duncan, Commented Mar 26, 2015 at 7:30
@duncan the listview is my array of lat and long, it is working fine, I can log them on the console, the problem is that is requiring an id foreach marker — Stack two
– Stack two, Commented Mar 26, 2015 at 13:23

duncan · Accepted Answer · 2016-06-21 21:14:07Z

8

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

edited Jun 21, 2016 at 21:14

answered Mar 26, 2015 at 14:13

duncan

32k15 gold badges84 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add dynamic markers on angular using API v3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related