地图不适用于离子ios仿真器

Question

我正在将地图（Mazemap）集成到我的离子应用程序中。它适用于chrome，但我无法在模拟器中看到地图。

这是我的index.html：

   <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <link href="css/custom.css" rel="stylesheet">
    <script src="https://api.mazemap.com/iframe-api/v1.0.0/iframe-api.js"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <!-- mazemap -->
    <link rel="stylesheet" href="https://api.mazemap.com/js/v1.0.5/mazemap.min.css">
    <script type='text/javascript' src='https://api.mazemap.com/js/v1.0.5/mazemap.min.js'></script>

这是我的控制器功能：

.controller('ShoppingCtrl', function($scope, $ionicLoading, $compile) {

$scope.$on("$ionicView.loaded", function() {

   Maze.Instancer.getCampus(108).then(function(campus){
        campus.addTo(map).setActive();
        map.fitBounds(campus.getBounds());
        map.setZLevel(1);
        }); 

   var map = Maze.map('mazemap-container', { campusloader: true});
        map.setView([25.316360, 51.438594], 10);
        map.campusloader.enable();
        var marker = Maze.marker([25.316155,51.438835], {icon: Maze.icon.chub({colour: 'green', glyph:'food-fork-drink'})}).addTo(map);
        var popup = Maze.popup().setContent('Food Court/Restaurants');
        marker.bindPopup(popup); //Bind the popup to the specific marker

Maze.Instancer.getCampus(108).then(function(campus){
        map.fitBounds( campus.getBounds() );
        campus.addTo(map).setActive().then( function(c) {
            map.setZLevel(1);
            map.getZLevelControl().show();
        });
    });