GoogleマップはIonicとAngularJSとの併用では表示されません

Question

Googleマップは表示されません。私はIonicとAngularJSで作業し、Geolocationプラグインを使用します。

これはアプリのための私のルーティングです：

angular.module('app.routes', []) 
.config(function($stateProvider, $urlRouterProvider) { 

    // Ionic uses AngularUI Router which uses the concept of states 
    // Learn more here: https://github.com/angular-ui/ui-router 
    // Set up the various states which the app can be in. 
    // Each state's controller can be found in controllers.js 
    $stateProvider 
    .state('menu.rServation', { 
    url: '/Réservation', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/rServation.html', 
     controller: 'rServationCtrl' 
     } 
    } 
    }) 

    .state('menu.voiture', { 
    url: '/Voiture', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/voiture.html', 
     controller: 'voitureCtrl' 
     } 
    } 
    }) 

    .state('menu.paramTres', { 
    url: '/Paramètres', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/paramTres.html', 
     controller: 'paramTresCtrl' 
     } 
    } 
    }) 
    .state('menu.LocationMap', { 
    url: '/Location', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/Locationmap.html', 
     controller: 'LocationMapCtrl' 
     } 
    } 
    }) 
    .state('menu.LocationMMap', { 
    url: '/Locationn', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/LocationMMap.html', 
     controller: 'MapCtrl' 
     } 
    } 
    }) 
    .state('menu.login', { 
    url: '/Login', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/login.html', 
     controller: 'loginCtrl' 
     } 
    } 
    }) 

    .state('menu', { 
    url: '/side-menu21', 
    templateUrl: 'templates/menu.html', 
    abstract:true 
    }) 

    .state('menu.detailsVoiture', { 
    url: '/Voiture/:Id', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/detailsVoiture.html', 
     controller: 'voitureCtrl' 
     } 
    } 
    }) 

    .state('menu.conexion', { 
    url: '/Conexion', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/conexion.html', 
     controller: 'conexionCtrl' 
     } 
    } 
    }) 
    .state('menu.detailsPreReservation',{ 
    url: '/DetailsPreReservation', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/detailsPreReservation.html', 
     controller: 'detailsPreReservationCtrl' 
     } 
    } 
    }) 
    .state('menu.profile',{ 
    url: '/profile', 
    views: { 
     'side-menu21': { 
     templateUrl: 'templates/profil.html', 
     controller: 'profilCtrl' 
     } 
    } 
    }) 

$urlRouterProvider.otherwise('/side-menu21/Réservation') 

}); 

、これはミューコントローラ

.controller('MapCtrl', function($scope, $state, $cordovaGeolocation) { 
    var options = {timeout: 10000, enableHighAccuracy: true}; 

    $cordovaGeolocation.getCurrentPosition(options).then(function(position){ 

    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

    var mapOptions = { 
     center: latLng, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions); 

    }, function(error){ 
    console.log("Could not get location"); 
    }); 
}) 

であり、この私の見解：

<ion-view> 
    <ion-content> 
     <div id="map" data-tap-disabled="true"></div> 
    </ion-content> 
</ion-view> 

と、この私のmenu.htmlのためサイドメニュー：

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
     <ion-nav-bar class="bar-calm"> 
      <ion-nav-back-button></ion-nav-back-button> 
      <ion-nav-buttons side="left"> 
       <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
      </ion-nav-buttons> 
     </ion-nav-bar> 
     <ion-nav-view name="side-menu21"></ion-nav-view> 
    </ion-side-menu-content> 
    <ion-side-menu side="left" id="side-menu21"> 
     <ion-header-bar class="bar-calm"> 
      <div class="title">Menu</div> 
     </ion-header-bar> 
     <ion-content padding="false" class="side-menu-left has-header"> 
      <ion-list> 
       <ion-item ui-sref="menu.rServation" menu-close="" > 
       <i class="icon ion-home balanced ">Réservation</i>        
       </ion-item> 
       <ion-item ui-sref="menu.voiture" menu-close="" > 
       <i class="icon ion-model-s balanced">Voitures</i> 
       </ion-item> 
       <ion-item ui-sref="menu.paramTres" menu-close="" > 
       <i class="icon ion-android-settings balanced">Paramètres</i> 
       </ion-item> 
       <ion-item ui-sref="menu.LocationMap" menu-close="" > 
       <i class="icon ion-map balanced">Location Agence</i> 
       </ion-item> 
        <ion-item ui-sref="menu.LocationMMap" menu-close="" > 
       <i class="icon ion-map balanced">Locationn Agence</i> 
       </ion-item> 
       <ion-item ui-sref="menu.login" menu-close="" > 
       <i class="icon ion-log-in balanced">Login</i> 
       </ion-item> 
      </ion-list> 
     </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

これは、あなたがコンテナの高さを設定しなかったテンプレートとエラーなし

Answer 1

ための画像である：

<style> 
#map { 
    height: 400px; 
} 
</style>