angularjs - ng-map (ionic) running but center is at top-left into modal

Question

I′m running an angular map (ngmap) into a modal dialogue. It′s run fine, but center is showing at the top-left from modal window (not centered).

I launch the modal with:

<a class="button-circle icon ion-ios-navigate-outline padding" ng-click="modal.show()"></a>

The modal is into the html (as script):

<script id="templates/modal.html" type="text/ng-template">
   <ion-modal-view style="width: 100%;">
   <ion-header-bar class="bar bar-header bar-positive">
      <h1 class="title">?Dónde está?</h1>
   </ion-header-bar>
   <ion-content class="padding" scroll="false" data-tap-disabled="true">
      <map zoom="17" center="{{data.latitude}}, {{data.longitude}}"  style="width:100%; height: 90%;">
      <marker position="{{data.latitude}}, {{data.longitude}}"></marker>
      </map>
      <button class="button button-full button-positive" ng-click="modal.hide()">Close</button>
       </ion-content>
   </ion-modal-view>
</script>

Finally, this is the controller:

.controller('MapCtrl', ['$scope', '$http', '$state', '$ionicModal', function($scope, $http, $state, $ionicModal){
    $http.get('app-data/cities.json')
    .success(function(data){
        $scope.data = data.places[$state.params.id];

    $ionicModal.fromTemplateUrl('templates/modal.html', {
        scope: $scope,
        animation: 'slide-in-up'
      }).then(function(modal) {
        $scope.modal = modal     
      })  

      $scope.openModal = function() {
        $scope.modal.show();
      };

      $scope.closeModal = function() {
        $scope.modal.hide();
      };

      $scope.$on('$destroy', function() {
        $scope.modal.remove();
      });

        });
}])

Any suggestions? Thanks ;-)

Answer 1

Try to analyze this Plunker which is working with an ugly "workaround" ($timeout).

http://plnkr.co/edit/4cgdHeiBYWlxKEuoGsl7?p=preview

On $http success handler I tried to use NgMap.getMap().then() in order to access directly map object and to set center manually. Then I can't uderstand why it doesn't center properly the map, but it requires to trigger "center_changed" manually and then setCenter again...

$http.get('cities.json') // $http.get('app-data/cities.json')
.success(function(data) {
  //$scope.data = data.places; //data.places[$state.params.id];
  $scope.zoom = 6;

  NgMap.getMap().then(function(map) {
    var cx = map.getCenter();
    var txt = "center is: lat="+cx.lat()+", lng="+cx.lng();

    map.setCenter({lat: data.places.latitude, lng: data.places.longitude});
    $scope.data = data.places;

    console.log(txt);
    $scope.trace = txt;
    $scope.map = map;
    google.maps.event.trigger(map, "center_changed");

    $timeout(function() {
      $scope.center();
    }, 2000);

  });

  ...

I think there's some ionic modal Css which interferes with Google maps. In fact it works quite well in a simple ionic view, while it has this annoying behavior inside a modal.