update: follow the map div that is under the value of "-webkit-overflow-scrolling" css rule is "touch" element
MODIFY
plugin.xml
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
-<plugin id="cordova-plugin-googlemaps" version="2.0.9-beta-20170916-0104" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
+<plugin id="cordova-plugin-googlemaps" version="2.0.9-beta-20170917-1350" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>cordova-plugin-googlemaps</name>
<js-module name="BaseClass" src="www/BaseClass.js">
<runs />

MODIFY
src/android/plugin/google/maps/CordovaGoogleMaps.java
src/android/plugin/google/maps/CordovaGoogleMaps.java
@@ -12,7 +12,9 @@ import android.content.pm.ApplicationInfo;
import android.content.pm.PackageManager;
import android.content.pm.PackageManager.NameNotFoundException;
import android.content.res.Configuration;
+import android.content.res.Resources;
import android.graphics.Color;
+import android.graphics.RectF;
import android.location.Location;
import android.location.LocationManager;
import android.net.Uri;
@@ -298,6 +300,8 @@ public class CordovaGoogleMaps extends CordovaPlugin implements ViewTreeObserver
CordovaGoogleMaps.this.resumeResizeTimer(args, callbackContext);
} else if ("pauseResizeTimer".equals(action)) {
CordovaGoogleMaps.this.pauseResizeTimer(args, callbackContext);
+ } else if ("updateMapPositionOnly".equals(action)) {
+ CordovaGoogleMaps.this.updateMapPositionOnly(args, callbackContext);
}
} catch (JSONException e) {
@@ -316,9 +320,46 @@ public class CordovaGoogleMaps extends CordovaPlugin implements ViewTreeObserver
mPluginLayout.timerLock.notify();
}
}
+ callbackContext.success();
+ }
+ public void updateMapPositionOnly(final JSONArray args, final CallbackContext callbackContext) throws JSONException {
+ final JSONObject elements = args.getJSONObject(0);
+
+ Bundle elementsBundle = PluginUtil.Json2Bundle(elements);
+ float zoomScale = Resources.getSystem().getDisplayMetrics().density;
+
+ Iterator<String> domIDs = elementsBundle.keySet().iterator();
+ String domId;
+ Bundle domInfo, size;
+ while (domIDs.hasNext()) {
+ domId = domIDs.next();
+ domInfo = elementsBundle.getBundle(domId);
+
+ size = domInfo.getBundle("size");
+ RectF rectF = new RectF();
+ rectF.left = (float)(Double.parseDouble(size.get("left") + "") * zoomScale);
+ rectF.top = (float)(Double.parseDouble(size.get("top") + "") * zoomScale);
+ rectF.right = rectF.left + (float)(Double.parseDouble(size.get("width") + "") * zoomScale);
+ rectF.bottom = rectF.top + (float)(Double.parseDouble(size.get("height") + "") * zoomScale);
+
+ mPluginLayout.HTMLNodeRectFs.put(domId, rectF);
+
+ domInfo.remove("size");
+ mPluginLayout.HTMLNodes.put(domId, domInfo);
+ }
+
+ mPluginLayout.pauseResize = true;
+ if (mPluginLayout.isWaiting) {
+ mPluginLayout.pauseResize = false;
+ synchronized (mPluginLayout.timerLock) {
+ mPluginLayout.timerLock.notify();
+ }
+ }
+ callbackContext.success();
}
public void pauseResizeTimer(final JSONArray args, final CallbackContext callbackContext) throws JSONException {
mPluginLayout.pauseResize = true;
+ callbackContext.success();
}
public void backHistory(final JSONArray args, final CallbackContext callbackContext) throws JSONException {
cordova.getActivity().runOnUiThread(new Runnable() {

MODIFY
src/ios/GoogleMaps/CordovaGoogleMaps.m
src/ios/GoogleMaps/CordovaGoogleMaps.m
CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
+- (void)updateMapPositionOnly:(CDVInvokedUrlCommand *)command {
+ if (self.pluginLayer != nil) {
+
+ NSDictionary *elementsDic = [command.arguments objectAtIndex:0];
+ NSString *domId;
+ CGRect rect = CGRectMake(0, 0, 0, 0);
+ NSMutableDictionary *domInfo, *size;
+ @synchronized(self.pluginLayer.pluginScrollView.debugView.HTMLNodes) {
+ for (domId in elementsDic) {
+ domInfo = [elementsDic objectForKey:domId];
+ size = [domInfo objectForKey:@"size"];
+ rect.origin.x = [[size objectForKey:@"left"] doubleValue];
+ rect.origin.y = [[size objectForKey:@"top"] doubleValue];
+ rect.size.width = [[size objectForKey:@"width"] doubleValue];
+ rect.size.height = [[size objectForKey:@"height"] doubleValue];
+ [domInfo setValue:NSStringFromCGRect(rect) forKey:@"size"];
+ [self.pluginLayer.pluginScrollView.debugView.HTMLNodes setObject:domInfo forKey:domId];
+ }
+ }
+
+ self.pluginLayer.pauseResize = false;
+ self.pluginLayer.isSuspended = false;
+ self.pluginLayer.isSuspended = false;
+ [self.pluginLayer resizeTask:nil];
+ }
+ CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
+ [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
+}
- (void)resumeResizeTimer:(CDVInvokedUrlCommand *)command {
if (self.pluginLayer != nil) {

MODIFY
www/googlemaps-cdv-plugin.js
www/googlemaps-cdv-plugin.js
@@ -126,6 +126,44 @@ if (!cordova) {
"svg", "p", "pre", "script", "style"
];
+ var followPositionTimer = null;
+ var followPositionTimerCnt = 0;
+ function followMapDivPositionOnly() {
+ var mapRects = {};
+ var mapIDs = Object.keys(MAPS);
+ mapIDs.forEach(function(mapId) {
+ var map = MAPS[mapId];
+ if (map && map.getVisible() && map.getDiv() && common.shouldWatchByNative(map.getDiv())) {
+ var mapDiv = map.getDiv();
+ var divId = mapDiv.getAttribute("__pluginDomId");
+ mapRects[divId] = {
+ size: common.getDivRect(mapDiv),
+ depth: cacheDepth[divId]
+ };
+ }
+ });
+ cordova_exec(null, null, 'CordovaGoogleMaps', 'updateMapPositionOnly', [mapRects]);
+ }
+
+ function onTouchEnd(event) {
+ followPositionTimerCnt = 0;
+ followPositionTimer = setInterval(function() {
+ if (followPositionTimerCnt++ > 25) {
+ clearInterval(followPositionTimer);
+ followPositionTimer = null;
+ return;
+ }
+ followMapDivPositionOnly();
+ }, 50);
+ }
+
+ function onTouchStart() {
+ if (followPositionTimer) {
+ clearInterval(followPositionTimer);
+ followPositionTimer = null;
+ }
+ }
+
function putHtmlElements() {
var mapIDs = Object.keys(MAPS);
if (isChecking) {
@@ -190,6 +228,13 @@ if (!cordova) {
if (!elemId) {
elemId = "pgm" + Math.floor(Math.random() * Date.now());
element.setAttribute("__pluginDomId", elemId);
+ if (common.getStyle(element, "-webkit-overflow-scrolling") === "touch") {
+ element.addEventListener("touchstart", onTouchStart);
+ element.addEventListener("touchmove", followMapDivPositionOnly);
+ element.addEventListener("touchend", onTouchEnd);
+ element.addEventListener("touchcancel", onTouchEnd);
+ element.addEventListener("touchleave", onTouchEnd);
+ }
}
// get dom depth

update: follow the map div that is under the value of "-webkit-overflow-scrolling" css rule is "touch" element