Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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
-
cordova plugin network information https://github.com/apache/cordova-plugin-network-information
-
cordova device https://cordova.apache.org/docs/en/3.0.0/cordova/device/device.html
-
Cordova-open-native-settings https://github.com/selahssea/Cordova-open-native-settings
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();
-
