Improving performance of google maps?

ionic-v1
1

Anyone worked with google maps inside Cordova + Angular before? The performance seems mediocre. Maps.google.com on the same device performs really well, is there any tuning that needs to be performed when using google maps inside a Cordova app?

I’m using the http://angular-google-maps.org/ plugin

2

I have a feeling it’s the plugin overhead, as I’ve used Google Maps with custom directives in Ionic before with no issues. I guess it depends on what you’re trying to do as well.

How does it perform if you just embed a map in your project and build with Cordova?

EDIT: Thinking about it now, there was a noticeable speed difference on Android < 4.4 using the Google Maps Javascript API. Looks like there is a plugin: https://github.com/imhotep/MapKit that lets you use the Android API. Never used it before, but in theory should offer some improved performance.

3

I just tried with the very basic simple google map example and it is similar in performance. My map is slightly slower, but not significant enough to convince me to re-write the directive for this project. It looks like it performs poorer when you are zoomed in on cities.

Are you able to get similar performance to maps.google.com?
I tried loading the map into a clone of the angularjs seed project and it seems to perform with similar speed. Removing it from angularjs altogether produces a slick feel like maps.google.com

This is all on a nexus 4 I should mention, not sure how the iphone handles this.

4

Interesting, I’ll look into this and report back on the performance, thanks

5

Yeah I’d be interested to know if you see any difference. Not having really used the mobile web version of maps.google.com I guess I didn’t really notice the performance hit, but I see what you mean.

6

Quick question, does anybody notice a really slow transition between 2 views when a map i displayed on the second view? (the map take the full content of the view).

I am using that library http://angular-google-maps.org, but I think it is gonna be the same thing without.

Do you guys have any tips to improve the performance regarding to google maps?

thanks

7

Hi, I know this is an old topic, but for those who are still having trouble with Ionic’s slow performance with Google Maps, I managed too improve the transition between pages by adding the Maps to the DOM only after “enter” transition is done and removing it before the “leave” transition.

controller.js

$scope.$on('$ionicView.afterEnter', function () {
    vm.showMap = true;
});
$scope.$on('$ionicView.beforeLeave', function () {
    vm.showMap = false;
});

view.html

    <ui-gmap-google-map  ng-if="vm.showMap"></ui-gmap-google-map>

I don’t say it’s the best solution, but I think it’s a good workaround. I didn’t found any place where they say Ionic fixed their performance issues with Google Maps…

2 Likes
8

Thank you, after implementing this, it is’t so laggy when switching views.

However, when i enter the view, i cannot scroll for about 3-4 secs ( time when map is loading). It’s like, when the map is loading, it blocks the rest of the app. Very bad UX, looks like the app froze