ui-gmap-markers showing only one marker

Question

I am trying to display multiple markers on a map using ui-google-maps library for angular but it is showing only one marker.

<div  id="map_canvas" ng-controller="mainCtrl">
<h1 align="center">Maps</h1>
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-markers models="rmarkers" coords="'self'"  fit='true' icon="'icon'">
</ui-map-markers>
</ui-gmap-google-map>
</div>

<script>
angular.module('main', ['google-maps'.ns()])
.controller('mainCtrl', function($scope,$http) {
    $scope.map = {center: {latitude: 42.3349940452867, longitude: -71.0353168884369 }, zoom: 14 };
    //$scope.marker={id: 1, coords: {latitude: 42.3349940452867, longitude: -71.0353168884369 }};
    $scope.options = {scrollwheel: false};
     $scope.rmarkers=[{id: 101, latitude: 42.3349940452867, longitude: -71.0353168884369},
           {id: 102,latitide: 42.35114190333,longitude: -71.0662789402048},
           {id: 103,latitide: 43.35114190333,longitude: -72.0662789402048},
           {id: 104,latitide: 44.35114190333,longitude: -73.0662789402048}];});

Answer 1

if by 'ui-google-maps library for angular' you mean https://github.com/angular-ui/angular-google-maps

then this shows multiple markers on a map, adapting dome of your code to show running in a fiddle http://jsfiddle.net/nigeljvm/duabubeo/9/

html layer

<div ng-app="main" ng-controller="mainCtrl"> <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true"> <ui-gmap-marker ng-repeat="m in map.markersr" coords="m" icon="m.icon" idkey="m.id"> </ui-gmap-marker> </ui-gmap-google-map> </div>

javascript layer

angular.module('main', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function ($scope) {

angular.extend($scope, {
    map: {
        center: {
            latitude: 42.3349940452867,
            longitude:-71.0353168884369
        },
        zoom: 11,
        markersr: [
        {
            id: 101,
            latitude:  42.3349940452867,
            longitude:-71.0363168884369
        },    
        {
            id: 102,
            latitude:  42.3563941755867,
                  longitude:-71.0466168884469
        }, {
            id: 103,
            latitude:   42.3753940755867,
                  longitude:-71.0853168884369
        }, {
            id: 104,
            latitude:  42.3684940856867,
               longitude:-71.1273168884369
        }],
        dynamicMarkers: []
    }
});

});

css .angular-google-map-container { height: 400px; }

based on the angular-ui source https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/issue-74-markers-events.js

Answer 2

You have a typo. Replace "Latitide" with "latitude"