Performance problems when adding many markers.

I’m proposing a patch to the PluginMarker.java file that will greatly improve the performance when adding hundreds of markers to the map.

I propose the creation of a createMarkers method (note the plural), which will take the same marker definition as does the currently available createMarker, except for the fact they’ll be in an array, therefore allowing the creation of multiple markers with a single over-the-bridge request. Naturally, the callback has to return an array of markers, instead of a single marker.

A private createMarker_ method is to be called by createMarkers. This does not break the current API, and the current createMarker method can be refactored to simply call the private version with its argument in an array.

I have already implemented marker caching and marker pre-loading which on top of that will drastically reduce memory consumption and prevent leaks.

This is where my understanding of this project ends. I don’t know what my constraints as a developer are:

• Are APIs frozen?
• Are they meant to mimic their respective native environments?
• Or abstract them away? (This preferred, imho.)
• Do iOS and Android APIs diverge today?

I’m seeing fantastic performance with these improvements, I’d really like to contribute them.

Thanks a lot for the help.

[hirbod]

@cvaliere you should really leave this forum. I’m sick of your attitude. When this is a shitty plugin and has ton of problems for you (because it just don’t fit your needs), go ahead and develop your very own version. I don’t know who you think you are. When you want to build something commercial then go ahead, hire an iOS and Android developer, pay like 5000-8000 € per month and create your own, perfect, non-shitty plugin and be disrespectful with them. After that, create a Git, and share your perfect solution with everybody.

If not, shut the hell up. I really don’t know how you even dare making demands on an open source project.

[wf9a5m75]

Hi everyone. As I said before, today is the day. The next version (2.0-beta) is ready to go (however beta).

First of all, try the demo app. You can download from my dropbox. cordova-googlemaps-v2-demo_01.apk

Demo video of the above apk

https://www.youtube.com/watch?v=oZBkTIpjTqg

---

There are several changes.

change 1 . multiple maps

As you may know, the next version supports multiple map in the same html. However one map takes large memory, so I recommend 2,3 maps at the one page. If you don’t use a map, remove it. That’s save the memory.

change 2. multiple pages

Version 1.x supports only single html file (typically index.html) The next version supports multiple HTML file (such as index.html, page1.html, page2.html …etc) You don’t need to cleanup the maps if you change html files. The plugin will do automatically.

However, changing tab page in the same html is a different. You need to still do map.setVisible(true/false) by yourself.

change 3. Recognize all html element

Version 1.x supports only under the map div. The next version recognize all HTML element of the page. It means you don’t need to execute map.setClickable(true/false) when HTML dialog is popped up on the map div.

Here is the tips If the plugin does not recognize your HTML elements on the map div, specify css

.dialog {
    position: fixed;
    z-index: 1000; //any value is fine
}

Since the html elements that have position:fixed takes a priority always in the maps plugin. (You don’t need to do this usually (I believe so))

change 4. save battery life

The problem of the version 1.x is the KeepWatching Timer. This timer watches HTML element positions under the map div periodically. However, if you don’t do anything on your app, still the timer is running. This is affect for battery life.

In the next version, the timer stops automatically if the user does not touch on the map anything for a while. If the user touch on the app again, the timer also starts. If no changes for a while, stop the timer again.

If you need to start the timer programmatically, you can do like this:

cordova.fireDocumentEvent('touch_start', {});

or

var event = document.createEvent('touch_start');
event.initEvent(eventName, false, false);
document.dispatchEvent(event);

change 5. performance improved

Another big problem of the version 1.x is that all (most) native code run on the UI thread (or run on the WebCore thread. The reason of this is the Google Maps native APIs require do it. However I tested so much time and rewrite all most whole code in both native and javascript, the most code run on the background thread.

And you are lucky. I work as Android developer usually. I work for one

If you don’t understand this talk , you can skip this. Just remember the performance is improved.

change 6. split the JS file

The version 1.x code of the Javascript is googlemaps-cdv-plugin.js The file includes 2873 lines. Wow, it’s too large. Not suite for maintenance…even for me.

I split the JS files for each classes (such as Marker.js, Circle.js, etc) https://github.com/mapsplugin/cordova-plugin-googlemaps/tree/multiple_maps/www

You can debug easily 😃

change 7. introduce BaseArrayClass

If you are familiar with the Google Maps Javascritp API v3, you probably know the MVCArray class The benefit of this class is you can monitor the events: insert_at, set_at, and remove_at. Using this class, your code would be simple.

change 8. property synchronizing

This is really useful. Most of getXXXX() methods return the values as normal javascript object.

For example, in version 1.x,

marker.getPosition(function(position) {
   // you have to wait the callback
});

in version 2.0-beta

var position = marker.getPosition();

You know what? Since the marker (and polyline,polygon…etc) extends the BaseClass (which is MVC class), you can monitor like this.

markers[0].on("position_changed", onPositionChanged);
markers[1].on("position_changed", onPositionChanged);
markers[2].on("position_changed", onPositionChanged);

function onPositionChanged() {
  var marker = this;
  var position = marker.getPosition();
}

However, map.getVisibleRegion() does not support this way. you still have to use callbak.

change 9. chain programming

In version 2.0, most of all setXXX() methods are able to chain.

marker.setPosition({"lat": ...., "lng": ....}).setTitle("Hello");

change 10. add more events, and renamed

Version 1.x events

event name	Androide	iOS
event name	Android	iOS
-	-	-|-
MAP_CLICK	YES	YES
MAP_LONG_CLICK	YES	YES
MY_LOCATION_CHANGE	YES	NO
MY_LOCATION_BUTTON_CLICK	YES	YES
INDOOR_BUILDING_FOCUSED	YES	YES
INDOOR_LEVEL_ACTIVATED	YES	YES
CAMERA_CHANGE	YES	YES
CAMERA_IDLE	NO	YES
MAP_READY	YES	YES
MAP_LOADED	YES	NO
MAP_WILL_MOVE	NO	YES
MAP_CLOSE	YES	YES
OVERLAY_CLICK	YES	YES
INFO_CLICK	YES	YES
MARKER_DRAG	YES	YES
MARKER_DRAG_START	YES	YES
MARKER_DRAG_END	YES	YES

Version 2.x events

event name	Androide	iOS	arguments[0]
MAP_READY	YES	YES	none
MAP_CLICK	YES	YES	LatLng
MAP_LONG_CLICK	YES	YES	LatLng
MY_LOCATION_BUTTON_CLICK	YES	YES	none
INDOOR_BUILDING_FOCUSED	YES	YES	none
INDOOR_LEVEL_ACTIVATED	YES	YES	building information
CAMERA_MOVE_START	YES	YES	true if the camera move start by gesture
CAMERA_MOVE	YES	YES	CameraPosition
CAMERA_MOVE_END	YES	YES	CameraPosition
POLYGON_CLICK	YES	YES	LatLng(clicked position)
POLYLINE_CLICK	YES	YES	LatLng(clicked position)
CIRCLE_CLICK	YES	YES	LatLng(clicked position)
GROUND_OVERLAY_CLICK	YES	YES	LatLng(clicked position)
INFO_CLICK	YES	YES	LatLng(marker position)
INFO_LONG_CLICK	YES	YES	LatLng(marker position)
INFO_CLOSE	YES	YES	LatLng(marker position)
INFO_OPEN	YES	YES	LatLng(marker position)
MARKER_CLICK	YES	YES	LatLng(marker position)
MARKER_DRAG	YES	YES	LatLng(marker position)
MARKER_DRAG_START	YES	YES	LatLng(marker position)
MARKER_DRAG_END	YES	YES	LatLng(marker position)

change 11. set background color

use plugin.google.maps.environment.setBackgroundColor()

change 12. geocoding/reverse geocoding

You can do like this

plugin.google.maps.Geocoder.geocode({
  "address" : [
     "address1", "address2" ... "addressN"
  ]
}, function( mvcArray ) {

  mvcArray.on('insert_at', function(index) {
     console.log( mvcArray.getAt(index) );
  });

});

change 13. add some features

I forgot to much. See the demo apk.

change 14. Not yet

map.showDialog(), map.closeDialog(), and map.addKmlOverlay() are not ready yet.

change 15. UIWebView & WKWebView

Both are Supported.

Crosswalk is not confirmed yet.

I think I miss something. I will post them if I remember.