Map not showing in ios emulator

ionic-v1
1

Hello,

I am integrating a map (Mazemap) into my application. It works fine with chrome, but I cannot see the map in the emulator.

Here is my 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>

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<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>

And this is what I have in the controller:

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

        // marker2.openPopup(); //For convenience, we want to auto-show this popup
    });
});

Shopping.html: