CODEWITHSUNDEEP
androidgoogle-mapsionic-frameworkangular-google-maps
Lev
Lev

Reputation: 115

Ionic Android app crashes when scrolled to google maps

I have pretty simple page with ionic card and bellow the card I have google maps:

<ui-gmap-google-map center='map.center' zoom='map.zoom' dragging='false' options="map.options" scroll="false"></ui-gmap-google-map>

in my style.css i have the size of the map configuration like so:

.angular-google-map-container { height: 400px; }

and in my controller I have the following code to initiate the map:

 uiGmapGoogleMapApi.then(function(maps) {
    $scope.map = { center: { latitude: $scope.lat,longitude: $scope.lng },
      zoom:15,
      options: {
        zoomControl: true,
        maxZoom:15,
        minZoom:10,
        draggable: false,
        rotateControl: false,
        scrollwheel: false,
        streetViewControl: false,
        disableDefaultUI: true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      }
    };
  });

On IOS everything works great. Same goes for chrome browser. But when I run the app on android it "unfortunately stops" from time to time. Especially if I'm scrolling fast before the all the data on the page is loaded.

Not sure how stabilise this behaviour seems like google maps+ ionic performance issue.

Any help for troubleshooting this issue would be great.

in adb logcat I found the following:

F/libc    (13733): Fatal signal 11 (SIGSEGV) at 0x00000005 (code=1), thread 13772 (myApp323408)
I/DEBUG   (  178): pid: 13733, tid: 13772, name: myApp323408  >>> com.ionicframework.myApp323408 <<<
W/ActivityManager(  529):   Force finishing activity com.ionicframework.myApp323408/.MainActivity
W/InputDispatcher(  529): channel '22441548 com.ionicframework.myApp323408/com.ionicframework.myApp323408.MainActivity (server)' ~ Consumer closed input channel or an error occurred.  events=0xd
E/InputDispatcher(  529): channel '22441548 com.ionicframework.myApp323408/com.ionicframework.myApp323408.MainActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
I/ActivityManager(  529): Process com.ionicframework.myApp323408 (pid 13733) has died.
W/InputDispatcher(  529): Attempted to unregister already unregistered input channel '22441548 com.ionicframework.myApp323408/com.ionicframework.myApp323408.MainActivity (server)'
I/WindowState(  529): WIN DEATH: Window{22441548 u0 id=0 com.ionicframework.myApp323408/com.ionicframework.myApp323408.MainActivity}
I/ActivityManager(  529): [TopPkgCurBat]    NowPkgName[com.asus.launcher]   Battery[39] TimeTick[1440510555542] OldPkgName[com.ionicframework.myApp323408]
I/cm.log.servpro( 1129): [Privacy]/ com.ionicframework.myApp323408 is not in contact list
I/KRCMD   (16987): [MESSAGE] the exit process ok:com.ionicframework.myApp323408
D/LauncherLog(  927): AppsCustomizePagedView - syncAppsPageItems page: 5 index: 81 Item: myApp

Upvotes: 1

Views: 1427

Answers (1)

Lev
Lev

Reputation: 115

use this one for maps in ionic works perfectly!

https://github.com/allenhwkim/angularjs-google-maps

I removed completely

<script src='lodash.min.js'></script> 
and 
<script src='angular-google-maps.min.js'></script>

removed the html markup for map :

<ui-gmap-google-map center='map.center' zoom='map.zoom' dragging='false' options="map.options" scroll="false"></ui-gmap-google-map>

And instead used ngMap. The usage is easy.

  1. load js files:

    <script src="http://maps.google.com/maps/api/js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

  2. add ngMap to your app:

    var myApp = angular.module('myApp', ['ngMap']);

  3. add map markup to the page (for example) :

    <map center="41,-87" zoom="3"></map>

So far tested on 3 different android devices about 10-15 items on each and behaviour is stable and there's also nice lazy loading feature!

Upvotes: 2

Related Questions