What are news in v2?

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('plugin_touch', {});

or

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

NOTE: The plugin v2 now uses plugin_touch instead of touch_start

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 the most of all code run in parallel. For example, adding multiple marker on a map works like this.

In the end, adding multiple marker become so faster.

npm version1.3.9	v1.3.9 Master branch / commit caf6ec1099	v2-beta / commit 906fc04
47.1 sec	1.0 sec	0.5 sec

See more information at issue #835: Performance problems when adding many markers

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
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.