google - ng-map angularjs

ng-map(iónico) funcionando, pero el centro está en la parte superior izquierda en modal

Question

Estoy ejecutando un mapa angular (ngmap) en un diálogo modal. Funciona bien, pero el centro se muestra en la parte superior izquierda de la ventana modal (no centrada).

Lanzo el modal con:

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

El modal está en html (como 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>

Finalmente, este es el controlador:

.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();
      });

        });
}])

¿Alguna sugerencia? Gracias ;-)

Answer 1

Intenta analizar este Plunker que está funcionando con una fea "solución temporal" ($ timeout).

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

En $ http success handler intenté usar NgMap.getMap (). Then () para acceder directamente al objeto de mapa y establecer el centro manualmente. Entonces no puedo entender por qué no centra correctamente el mapa, pero requiere activar "center_changed" manualmente y luego configurar de nuevo el centro ...

$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);

  });

  ...

Creo que hay algún Css modal iónico que interfiere con los mapas de Google. De hecho, funciona bastante bien en una vista iónica simple, mientras que tiene este comportamiento molesto dentro de un modal.