Adding Multiple Markers to Angular-google-maps

Question

I am having the hardest time getting my angular project to display multiple map markers. I have a service called retsAPI where I am querying a local MLS database for home listings. I am trying to display these items on a google mapes. Here is my controller.

function retsMapController($scope, uiGmapGoogleMapApi, uiGmapIsReady, retsAPI) {
$scope.map = {
    center: {
        latitude: 43.6376107,
        longitude: -116.314943
    },
    zoom: 10
};
$scope.options = {
        scrollwheel: false,
        streetViewControl: false,
        mapTypeControl: false,
        scaleControl: false,
        rotateControl: false,
        zoomControl: false
};

$scope.markers = [];
uiGmapIsReady.promise()
    .then(function (instances) {
        console.log(instances[0].map);
    })
    .then(function () {
        retsAPI.default().success(function(result) {
            $scope.results = result;
            var i = 0;
               result.forEach(function(item) {
                   $scope.markers.push({
                      id: Date.now()+i,
                       coords: {
                           latitude: item['LMD_MP_Latitude'],
                           longitude: item['LMD_MP_Longitude']
                       }
                   });
               i++;
            });
            console.log("MARKER: ", $scope.markers);
    });


});
uiGmapGoogleMapApi.then(function (maps) {
    angular.extend($scope.map, {
        options: {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.LEFT_CENTER
            }
        }
    });
});

Here is my HTML file.

<div id="real_angular" ng-controller="retsMap" ng-app="real_angular">
<div rets-search-form></div>
{{ markers }}
<ui-gmap-google-map
    ng-if="map.center"
    center='map.center'
    zoom='map.zoom'
    options='options'
    refresh="true">
    <ui-gmap-markers
        models="markers"
        coords="'self'"
        icon="'icon'">
    </ui-gmap-markers>
</ui-gmap-google-map>

and this is the result of $scope.markers

[{"id":1481596995980,"coords":{"latitude":"43.7335624694824","longitude":"-116.400283813477"}},{"id":1481596995981,"coords":{"latitude":"44.9327393","longitude":"-116.0692291"}},{"id":1481596995982,"coords":{"latitude":"44.846809387207","longitude":"-116.179756164551"}},{"id":1481596995983,"coords":{"latitude":"44.0762062072754","longitude":"-116.978248596191"}},{"id":1481596995984,"coords":{"latitude":"44.6780061721802","longitude":"-116.120807826519"}},{"id":1481596995985,"coords":{"latitude":"44.8671951293945","longitude":"-116.026954650879"}},{"id":1481596995986,"coords":{"latitude":"43.0574607849121","longitude":"-114.13264465332"}},{"id":1481596995987,"coords":{"latitude":"43.7259407043457","longitude":"-116.800910949707"}},{"id":1481596995988,"coords":{"latitude":"42.55171340147","longitude":"-114.460141584277"}},{"id":1481596995989,"coords":{"latitude":"44.3812294006348","longitude":"-115.982734680176"}},{"id":1481596995990,"coords":{"latitude":"42.9506072998047","longitude":"-115.298492431641"}},{"id":1481596995991,"coords":{"latitude":"42.5505142211914","longitude":"-114.454963684082"}},{"id":1481596995992,"coords":{"latitude":"43.677565","longitude":"-116.0496032"}},{"id":1481596995993,"coords":{"latitude":"44.2447853088379","longitude":"-116.953323364258"}},{"id":1481596995994,"coords":{"latitude":"43.5853805541992","longitude":"-116.189315795898"}},{"id":1481596995995,"coords":{"latitude":"43.6678466796875","longitude":"-116.680221557617"}},{"id":1481596995996,"coords":{"latitude":"43.6502661556005","longitude":"-116.251468285918"}},{"id":1481596995997,"coords":{"latitude":"43.6551094055176","longitude":"-116.685394287109"}},{"id":1481596995998,"coords":{"latitude":"44.5916213989258","longitude":"-116.669593811035"}},{"id":1481596995999,"coords":{"latitude":"42.6074829101563","longitude":"-114.768821716309"}}]

it also appears that i have lost my google controls. I am not sure what happened to make those disappear.

Answer 1

Given the data format for $scope.markers you need to replace markers binding from coords="'self'" to coords="'coords'":

<ui-gmap-markers models="markers" coords="'coords'" icon="'icon'">
</ui-gmap-markers> 

Example

Demo