angular-google-maps - Markers not showing on the map

Question

I'm having difficulties to add the markers on the map. I'm not getting any error, but still not displaying.

Controller

.....
var load = [];
            for (var i=0; i < $scope.events.length; i++) {
               var marker = {
                    id: i,
                    coords:{
                        latitude: $scope.events[i].location.geometry[1],
                        longitude: $scope.events[i].location.geometry[0]
                    },
                    icon: "images/icons/markertag.png"
               };
               load.push(marker);
            }
            $scope.randomMarkers = load;
......

View

<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options'>
    <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" idKey="'id'"></ui-gmap-markers>
</ui-gmap-google-map>

The array randomMarkers is correct, as i check if the array is there with the information.

The map is loading, but no markers are displayed.

Any ideas?

If you've put coordinates in "coords" object, then in your directive you have to change `coords="'self'"` to `coords="'coords"'`. "self" means that coordinates are held directly inside "marker" object. So either you change "self" to "coords" or move "latitude" and "longitude" out of "coords" object to "marker". Let me know whether it works so I can post the answer. — itachi, Jun 18 '16 at 01:37

score 1 · Accepted Answer · answered Jun 27 '16 at 21:52

As itachi commented:

<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options'>
    <ui-gmap-markers models="randomMarkers" coords="'coords'" icon="'icon'" idKey="'id'"></ui-gmap-markers>
</ui-gmap-google-map>

changed self to coords.

Working!

Thank you

angular-google-maps - Markers not showing on the map

1 Answers1