-
Notifications
You must be signed in to change notification settings - Fork 917
What are news in v2?
There are several changes.
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.
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.
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))
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);
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.
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 :)
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.
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.
In version 2.0, most of all setXXX()
methods are able to chain.
marker.setPosition({"lat": ...., "lng": ....}).setTitle("Hello");
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 |
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) |
use plugin.google.maps.environment.setBackgroundColor()
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) );
});
});
I forgot to much. See the demo apk.
map.showDialog()
, map.closeDialog()
, and map.addKmlOverlay()
are not ready yet.
Both are Supported.
Crosswalk is not confirmed yet.
I think I miss something. I will post them if I remember.
If you get an error, feel free to ask me on the official community or the issue list.
New version 2.0-beta2 is available.
The cordova-googlemaps-plugin v2.0 has more faster, more features.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md
New versions will be announced through the official community. Stay tune!
Feel free to ask me on the issues tracker.
Or on the official community is also welcome!
New version 2.0-beta2 is available.
The cordova-googlemaps-plugin v2.0 has more faster, more features.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md