Onsen UI sliding menu stops with Angular Map



  • Hy guys i have a challenge here (to me)
    I’m using angular google maps with onsen UI
    http://angular-ui.github.io/angular-google-maps/

    My problem : when i have internet connection , i can click on menu to call a page with a google maps and it loads. And it works only with cordova 4.3… argghh
    But when i have no internet connection my slide stops at half page. I tried everything i can to imagine, but i know there’s something before me and i dont see.
    What i need : if i have no connection, the sliding menu calls the page but the maps not load (i’ll show a message or something about) .

    <!DOCTYPE html>
    <!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
    <html lang="en" ng-app="app" ng-csp>
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
    
        <!-- JS dependencies (order matters!) -->
        <script src="scripts/platformOverrides.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/onsen/js/onsenui.js"></script>
        
        <!-- CSS dependencies -->
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    
        <!-- CSP support mode (required for Windows Universal apps) -->
        <link rel="stylesheet" href="lib/angular/angular-csp.css" />
    
    
        <!-- --------------- App init --------------- -->
    
        <title>Onsen UI Sliding Menu</title>
    
        <script>
            angular.module('app', ['onsen']);
        </script>
    
        <style>
            
                #map { 
        height: 400px;
        margin: 20px 0;
        border-radius: 5px;
        border: 1px solid silver;
    }
        </style>
    
    </head>
    
    <body>
        <!-- Cordova reference -->
        <script src="cordova.js"></script>
        <script src="scripts/index.js"></script>
        <script src="script-tags-for-development.js"></script>
    <script>
      var app = angular.module('app', ['ngMap','onsen']);
      app.controller('CircleSimpleCtrl', function() {
        var vm = this;
        vm.cities = {
          chicago: {population:2714856, position: [-29.3074791, -50.921819]}
        }
        vm.getRadius = function(num) {
          return Math.sqrt(num) * 100;
        }
      });
    </script>
        
        <!-- -->
    
        <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
                          var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
        </ons-sliding-menu>
    
        <ons-template id="menu.html">
            <ons-page modifier="menu-page">
                <ons-toolbar modifier="transparent"></ons-toolbar>
    
                <ons-list class="menu-list">
                    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                        <ons-icon icon="fa-plus"></ons-icon>
                        New Post
                    </ons-list-item>
    
                    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                        <ons-icon icon="fa-bookmark"></ons-icon>
                        Bookmark
                    </ons-list-item>
    
                    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                        <ons-icon icon="fa-twitter"></ons-icon>
                        Official Twitter
                    </ons-list-item>
                </ons-list>
    
                <br>
    
                <ons-list class="bottom-menu-list">
                    <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                        Settings
                        <div class="notification menu-notification">3</div>
                    </ons-list-item>
    
                    <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                        Help
                    </ons-list-item>
    
                    <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                        Send feedback
                    </ons-list-item>
                </ons-list>
            </ons-page>
        </ons-template>
    
        <ons-template id="page1.html">
            <ons-page>
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button ng-click="menu.toggle()">
                            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center">Page 1</div>
                </ons-toolbar>
    
                <ons-row style="margin-top: 100px; text-align: center;">
                    <ons-col>
                        <ons-button modifier="light" ng-click="menu.toggleMenu()">
                            Toggle Menu
                        </ons-button>
                        <p style="color: #999; font-size: 13px;">Click "Toggle Menu" to close/open menu,<br> You can also swipe the page left/right.</p>
                    </ons-col>
                </ons-row>
            </ons-page>
        </ons-template>
    
        <ons-template id="page2.html"   ng-controller="CircleSimpleCtrl as vm">
            <ons-page>
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button ng-click="menu.toggle()">
                            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center">Page 2</div>
                </ons-toolbar>
    
    
                <ons-row style="margin-top: 100px; text-align: center;">
                    <ons-col>
                        <ng-map center="-29.3074791, -50.921819" zoom="11" mayTypeId="TERRAIN">
        <shape name="circle" ng-repeat="city in vm.cities" no-watcher="true"
          stroke-color="#FF0000"
          stroke-opacity="0.8"
          stroke-weight="2"
          fill-color="#FF0000"
          fill-opacity="0.35"
          center="{{city.position}}"
         ></shape>
      </ng-map>
      
      
                    </ons-col>
                </ons-row>
              
            </ons-page>
        </ons-template>
        
    </body>
    </html>
    

    script-tags-for-development.js

    document.write([
      '<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>',
      '<script src="lib/angular/angular.min.js"></script>',
      '<script src="app.js"></script>',
      '<script src="controllers/map-controller.js"></script>',
      '<script src="services/ng-map.js"></script>',
      '<script src="services/ng-map-pool.js"></script>',
      '<script src="services/geo-coder.js"></script>',
      '<script src="services/navigator-geolocation.js"></script>',
      '<script src="services/attr2-map-options.js"></script>',
      '<script src="services/street-view.js"></script>',
      '<script src="filters/camel-case.js"></script>',
      '<script src="filters/jsonize.js"></script>',
      '<script src="directives/bicycling-layer.js"></script>',
      '<script src="directives/custom-control.js"></script>',
      '<script src="directives/custom-marker.js"></script>',
      '<script src="directives/directions.js"></script>',
      '<script src="directives/drawing-manager.js"></script>',
      '<script src="directives/dynamic-maps-engine-layer.js"></script>',
      '<script src="directives/fusion-tables-layer.js"></script>',
      '<script src="directives/heatmap-layer.js"></script>',
      '<script src="directives/info-window.js"></script>',
      '<script src="directives/kml-layer.js"></script>',
      '<script src="directives/map-data.js"></script>',
      '<script src="directives/map-lazy-load.js"></script>',
      '<script src="directives/map-type.js"></script>',
      '<script src="directives/map.js"></script>',
      '<script src="directives/maps-engine-layer.js"></script>',
      '<script src="directives/marker.js"></script>',
      '<script src="directives/overlay-map-type.js"></script>',
      '<script src="directives/places-auto-complete.js"></script>',
      '<script src="directives/shape.js"></script>',
      '<script src="directives/street-view-panorama.js"></script>',
      '<script src="directives/traffic-layer.js"></script>',
      '<script src="directives/transit-layer.js"></script>',
      '<script>',
      'document.addEventListener("DOMContentLoaded", function(event) {',
      '  window.parent.postMessage({height:document.body.getBoundingClientRect().height},"*");',
      '});',
      '</script>'
    ].join('\n'));
    
    

    APP.JS

    angular.module('ngMap', ['onsen']);
    


  • I had an issue similar to this and it was dealing with the canvas. This might not be the right way to handle this situation, but could you implement an if statement in the menu call function that uses window.navigator.offline? I would do if true -> google map page else if false -> go to a page saying offline or maybe redirect to settings to enable internet or something?

    Does this make sense? Sorry I am not responding with code, just throwing this off the top of my head.



  • @munsterlander yes makes sense. I was thinking … there’s something wrong with code. But seems the real problem is the internet connection. I’ll make a condition.



  • Solved here @munsterlander and guys!

    If anyone needs !!!

    I’ve made a modification to turn on the Network connection , instead of exit the app.

    Plugins

    On <head> section

            function checkConnection() {
    
                // Wait for device API libraries to load
                //
                document.addEventListener("deviceready", onDeviceReady, false);
    
                // device APIs are available
                //
                function onDeviceReady() {
                    checkConnection();
                }
    
                var networkState = navigator.connection.type;
    
                var states = {};
                states[Connection.UNKNOWN] = 'Unknown connection';
                states[Connection.ETHERNET] = 'Ethernet connection';
                states[Connection.WIFI] = 'WiFi connection';
                states[Connection.CELL_2G] = 'Cell 2G connection';
                states[Connection.CELL_3G] = 'Cell 3G connection';
                states[Connection.CELL_4G] = 'Cell 4G connection';
                states[Connection.CELL] = 'Cell generic connection';
                states[Connection.NONE] = 'No network connection';
                if ((states[networkState]) == states[Connection.NONE]) {
                    if (confirm('Please check your Internet connection. Do you want to acess your settings?')) {
                        if (typeof cordova.plugins.settings.openSetting != undefined)
                            cordova.plugins.settings.openSetting("wifi", function () { console.log("acessing now ... please wait") }, function () { console.log("failed to open wifi settings") });
                        
                    } else {
                        navigator.app.exitApp();
                    }
                    // end  even when you turn on the network
                    navigator.app.exitApp();
                }
            }
    
            checkConnection();