angularjsgoogle-mapsgoogle-maps-api-3ui.bootstrap

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


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?


Solution

  • 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