Angularjs Google Map Add Markers

Question

I am working on a project which need to place additional marker based on the latlng retrieved from database. The map load successfully but somehow i just can't make marker show on the map.

Here is my code

JAVASCRIPT

var app = angular.module('myApp', ['ngResource']);

app.service('Map', function($q) {
  this.init = function() {
      navigator.geolocation.getCurrentPosition(function(position) {
        var MapOptions = {
          center: new google.maps.LatLng(38.431934, 141.309402),
          zoom: 16,
          disableDefaultUI: true,
          draggable: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        this.map = new google.maps.Map(document.getElementById("map"), MapOptions);
        this.places = new google.maps.places.PlacesService(this.map);
      });
    }  
});

app.controller('MainCtrl', function($scope, $resource, Map) {
  $scope.fetchdata = {};
  var Fetchdata = $resource('http://localhost:8080/fetchnote');
  Fetchdata.query(function(results) {
    $scope.fetchdata = results;
    angular.forEach($scope.fetchdata, function(value, index) {
      var lat = value.latitude;
      var lng = value.longitude;
      addtomap(lat, lng)
    })
  })

  function addtomap(lat, lng, icon) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: Map.map
    });
  }
  Map.init();
});

Is there anything i forgot to add or ??

Answer 1

see this http://jsfiddle.net/pc7Uu/3153/

 Map.init();
 angular.forEach($scope.fetchdata, function(value, index) {
  //alert(value);
  var lat = value.latitude;
  var lng = value.longitude;
  addtomap(lat, lng)
});

You were calling your markers before the Map was initialized, replace values by your server values and it shall work.

Hope this solves your problem