Can't center google map with ionic framework and ngMap

Question

I'm using Ionic Framework b14, and the latest ngmap,

I have a view that shows the map but when I want to set the center it does not show the coordinates I'm getting from a service.

(function() {

  var injectParams = ['$scope', '$stateParams', 'storeFactory'];
  var StoreController = function($scope, $stateParams, storeFactory) {
    var id = $stateParams.storeId;
    $scope.store;


    storeFactory.getStore(id)
      .success(function(store) {
        $scope.store = store;
      }).error(function(error) {
        $scope.status = ' ' + error.message;
      });


    $scope.$on('mapInitialized', function(event, map) {
      var myLatLng = new google.maps.LatLng(store.Latitude, store.Longitud);
      map.setCenter(myLatLng);

    });

  };

  StoreController.$inject = injectParams;

  angular.module('elizondo').controller('StoreController', StoreController);

}());

I suppose is has to be something with the time it takes the server to respond, but I have no idea how to fix it, any help you can give me.

thanks.

Answer 1

You are correct, the mapInitialized listener function will execute before the success callback from getStore.

You can save the map from the listener function in a variable and use that in your callback:

var map;

$scope.$on('mapInitialized', function(event, m) {
  map = m;
});

storeFactory.getStore(id).success(function(store) {

  $scope.store = store;

  var myLatLng = new google.maps.LatLng(store.Latitude, store.Longitud);
  map.setCenter(myLatLng);
});

If your map directive scope is the same as the StoreController scope, for example:

<div ng-controller="StoreController">
  <map zoom="8"></map>
</div>

Then the map object will already be available on $scope within the controller so then you can skip the mapInitialized listener function (unless you are using it for something else as well) and just do:

storeFactory.getStore(id).success(function(store) {

  $scope.store = store;

  var myLatLng = new google.maps.LatLng(store.Latitude, store.Longitud);
  $scope.map.setCenter(myLatLng);
});