Implement camera event mechanism
MODIFY
src/android/plugin/google/maps/PluginMap.java
src/android/plugin/google/maps/PluginMap.java
@@ -444,7 +444,7 @@ public class PluginMap extends MyPlugin implements OnMarkerClickListener,
});
} else {
mapView.setVisibility(View.VISIBLE);
- PluginMap.this.onCameraEvent("camera_end");
+ PluginMap.this.onCameraEvent("camera_move_end");
callbackContext.success();
}
}
@@ -463,7 +463,7 @@ public class PluginMap extends MyPlugin implements OnMarkerClickListener,
});
} else {
mapView.setVisibility(View.VISIBLE);
- PluginMap.this.onCameraEvent("camera_end");
+ PluginMap.this.onCameraEvent("camera_move_end");
callbackContext.success();
//if (map.getMapType() == GoogleMap.MAP_TYPE_NONE) {
PluginMap.this.onMapLoaded();
@@ -2316,7 +2316,7 @@ public class PluginMap extends MyPlugin implements OnMarkerClickListener,
@Override
public void onMapLoaded() {
- this.onCameraEvent("camera_end");
+ this.onCameraEvent("camera_move_end");
}

MODIFY
src/browser/CordovaGoogleMaps.js
src/browser/CordovaGoogleMaps.js
+
var utils = require('cordova/utils');
var PluginMap = require('cordova-plugin-googlemaps.PluginMap'),
event = require('cordova-plugin-googlemaps.event');
@@ -26,8 +27,8 @@ document.addEventListener("load_googlemaps", function() {
}
var secureStripeScript = document.createElement('script');
- //secureStripeScript.setAttribute('src','https://maps.googleapis.com/maps/api/js?key=' + API_KEY_FOR_BROWSER);
- secureStripeScript.setAttribute('src','https://maps.googleapis.com/maps/api/js');
+ secureStripeScript.setAttribute('src','https://maps.googleapis.com/maps/api/js?key=' + API_KEY_FOR_BROWSER);
+ //secureStripeScript.setAttribute('src','https://maps.googleapis.com/maps/api/js');
secureStripeScript.addEventListener("load", function() {
API_LOADED = true;

MODIFY
src/browser/PluginMap.js
src/browser/PluginMap.js
@@ -21,21 +21,22 @@ function PluginMap(mapId, options, mapDivId) {
var self = this;
BaseClass.apply(this);
var mapDiv = document.querySelector("[__pluginMapId='" + mapId + "']");
- var dummyDiv = document.createElement("div");
- dummyDiv.style.userSelect="none";
- dummyDiv.style["-webkit-user-select"]="none";
- dummyDiv.style["-moz-user-select"]="none";
- dummyDiv.style["-ms-user-select"]="none";
+ var container = document.createElement("div");
+ container.style.userSelect="none";
+ container.style["-webkit-user-select"]="none";
+ container.style["-moz-user-select"]="none";
+ container.style["-ms-user-select"]="none";
mapDiv.style.position = "relative";
- dummyDiv.style.position = "absolute";
- dummyDiv.style.top = 0;
- dummyDiv.style.bottom = 0;
- dummyDiv.style.right = 0;
- dummyDiv.style.left = 0;
- mapDiv.insertBefore(dummyDiv, mapDiv.firstElementChild);
+ container.style.position = "absolute";
+ container.style.top = 0;
+ container.style.bottom = 0;
+ container.style.right = 0;
+ container.style.left = 0;
+ mapDiv.insertBefore(container, mapDiv.firstElementChild);
self.set("isGoogleReady", false);
+ self.set("container", container);
Object.defineProperty(self, "id", {
value: mapId,
@@ -93,11 +94,22 @@ function PluginMap(mapId, options, mapDivId) {
}
}
- var map = new google.maps.Map(dummyDiv, mapInitOptions);
+ var map = new google.maps.Map(container, mapInitOptions);
map.mapTypes = mapTypeReg;
+ self.set('map', map);
google.maps.event.addListenerOnce(map, "projection_changed", function() {
self.trigger(event.MAP_READY);
+ map.addListener("idle", self._onCameraEvent.bind(self, 'camera_move_end'));
+ map.addListener("bounce_changed", self._onCameraEvent.bind(self, 'camera_move'));
+ // map.addListener("zoom_changed", self._onCameraEvent.bind(self, 'camera_move_end'));
+ map.addListener("drag", self._onCameraEvent.bind(self, 'map_drag'));
+ map.addListener("dragend", self._onCameraEvent.bind(self, 'map_drag_end'));
+ map.addListener("dragstart", self._onCameraEvent.bind(self, 'map_drag_start'));
+ map.addListener("drag", self._onCameraEvent.bind(self, 'camera_move'));
+ map.addListener("dragend", self._onCameraEvent.bind(self, 'camera_move_end'));
+ map.addListener("dragstart", self._onCameraEvent.bind(self, 'camera_move_start'));
+ //self._onCameraEvent.call(self, 'camera_move_end');
});
if (options) {
@@ -129,7 +141,6 @@ function PluginMap(mapId, options, mapDivId) {
} else {
map.setCenter({lat: 0, lng: 0});
}
- self.set("map", map);
});
@@ -137,6 +148,27 @@ function PluginMap(mapId, options, mapDivId) {
utils.extend(PluginMap, BaseClass);
+PluginMap.prototype.setDiv = function(onSuccess, onError, args) {
+ var self = this,
+ map = self.get('map'),
+ container = self.get('container');
+
+ if (args.length === 0) {
+ if (container && container.parentNode) {
+ container.parentNode.removeAttribute("__pluginMapId");
+ container.parentNode.removeChild(container);
+ }
+ } else {
+ var domId = args[0];
+ var mapDiv = document.querySelector("[__pluginDomId='" + domId + "']");
+ mapDiv.style.position = "relative";
+ mapDiv.insertBefore(container, mapDiv.firstElementChild);
+ mapDiv.setAttribute("__pluginMapId", self.id);
+ }
+
+ google.maps.event.trigger(map, "resize");
+ onSuccess();
+};
PluginMap.prototype.resizeMap = function(onSuccess, onError, args) {
var self = this;
var map = self.get("map");
@@ -207,6 +239,34 @@ PluginMap.prototype.setMapTypeId = function(onSuccess, onError, args) {
map.setMapTypeId(MAP_TYPES[mapTypeId]);
onSuccess();
};
+PluginMap.prototype._onCameraEvent = function(evtName) {
+console.log(evtName);
+ var self = this,
+ map = self.get("map"),
+ center = map.getCenter(),
+ bounds = map.getBounds(),
+ ne = bounds.getNorthEast(),
+ sw = bounds.getSouthWest();
+
+
+ var cameraInfo = {
+ 'target': {'lat': center.lat, 'lng': center.lng},
+ 'zoom': map.getZoom(),
+ 'tilt': map.getTilt(),
+ 'bearing': map.getHeading(),
+ 'northeast': {'lat': ne.lat, 'lng': ne.lng},
+ 'southwest': {'lat': sw.lat, 'lng': sw.lng},
+ 'farLeft': {'lat': ne.lat, 'lng': sw.lng},
+ 'farRight': {'lat': ne.lat, 'lng': ne.lng}, // = northEast
+ 'nearLeft': {'lat': sw.lat, 'lng': sw.lng}, // = southWest
+ 'nearRight': {'lat': sw.lat, 'lng': ne.lng}
+ };
+ plugin.google.maps[self.id]({
+ 'evtName': evtName,
+ 'callback': '_onCameraEvent',
+ 'args': [cameraInfo]
+ });
+};
PluginMap.prototype.loadPlugin = function(onSuccess, onError, args) {
var self = this;

MODIFY
www/js_CordovaGoogleMaps-for-browser.js
www/js_CordovaGoogleMaps-for-browser.js
+
var utils = require('cordova/utils'),
common = require('cordova-plugin-googlemaps.Common'),
cordova_exec = require('cordova/exec'),
@@ -7,6 +8,13 @@ var utils = require('cordova/utils'),
Map = require('cordova-plugin-googlemaps.Map'),
StreetViewPanorama = require('cordova-plugin-googlemaps.StreetViewPanorama');
+
+function nativeCallback(params) {
+ var args = params.args || [];
+ args.unshift(params.evtName);
+ this[params.callback].apply(this, args);
+}
+
function CordovaGoogleMaps(execCmd) {
var self = this;
BaseClass.apply(this);
@@ -73,6 +81,7 @@ CordovaGoogleMaps.prototype.getMap = function(div, mapOptions) {
}
// Create a map instance.
var map = new Map(mapId, self.execCmd);
+ plugin.google.maps[mapId] = nativeCallback.bind(map);
// If the map is removed, clean up the information.
map.one('remove', self._remove.bind(self, mapId));

Implement camera event mechanism