Die Google Map scheint nicht mit Ionic und AngularJS zu funktionieren

Question

Die Google Map wird nicht angezeigt. Ich arbeite mit Ionic und AngularJS und verwende das Geolocation Plugin.

Das ist mein Routing für die App:

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') 

}); 

und dies ist mu Controller

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

und das ist meine Ansicht:

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

und dies ist mein menu.html für Seitenmenü:

Diese 10

ist ein Bild für die Vorlage und kein Fehler

Answer 1

Sie hat keine die Höhe für den Container:

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