Fix: HtmlInfoWindow does not work on browser platform
MODIFY
src/browser/PluginMap.js
src/browser/PluginMap.js
-
var utils = require('cordova/utils'),
event = require('cordova-plugin-googlemaps.event'),
BaseClass = require('cordova-plugin-googlemaps.BaseClass'),
@@ -57,6 +56,11 @@ function PluginMap(mapId, options, mapDivId) {
enumerable: false,
writable: false
});
+ Object.defineProperty(self, "activeMarker", {
+ value: null,
+ enumerable: false,
+ writable: true
+ });
self.set('clickable', true);
@@ -237,9 +241,13 @@ PluginMap.prototype.setOptions = function(onSuccess, onError, args) {
};
PluginMap.prototype.setActiveMarkerId = function(onSuccess, onError, args) {
+ var self = this,
+ markerId = args[0];
+ self.activeMarker = self.objects[markerId];
onSuccess();
};
PluginMap.prototype.clear = function(onSuccess, onError, args) {
+ self.activeMarker = null;
onSuccess();
};
@@ -451,9 +459,20 @@ PluginMap.prototype.fromLatLngToPoint = function(onSuccess, onError, args) {
var lat = args[0],
lng = args[1];
- var projection = map.getProjection();
- var point = projection.fromLatLngToPoint(new google.maps.LatLng(lat, lng));
- onSuccess([point.x, point.y]);
+ var projection = map.getProjection(),
+ bounds = map.getBounds(),
+ ne = bounds.getNorthEast(),
+ sw = bounds.getSouthWest(),
+ zoom = map.getZoom(),
+ latLng = new google.maps.LatLng(lat, lng);
+
+
+ var topRight = projection.fromLatLngToPoint(ne);
+ var bottomLeft = projection.fromLatLngToPoint(sw);
+ var scale = Math.pow(2, zoom);
+ var worldPoint = projection.fromLatLngToPoint(latLng);
+
+ onSuccess([(worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale]);
};
PluginMap.prototype.fromPointToLatLng = function(onSuccess, onError, args) {
@@ -462,8 +481,17 @@ PluginMap.prototype.fromPointToLatLng = function(onSuccess, onError, args) {
var x = args[0],
y = args[1];
- var projection = map.getProjection();
- var latLng = projection.fromPointToLatLng(new google.maps.Point(x, y));
+ var projection = map.getProjection(),
+ bounds = map.getBounds(),
+ ne = bounds.getNorthEast(),
+ sw = bounds.getSouthWest(),
+ zoom = map.getZoom();
+
+ var topRight = projection.fromLatLngToPoint(ne);
+ var bottomLeft = projection.fromLatLngToPoint(sw);
+ var scale = Math.pow(2, zoom);
+ var worldPoint = new google.maps.Point(x / scale + bottomLeft.x, y / scale + topRight.y);
+ var latLng = map.getProjection().fromPointToLatLng(worldPoint);
onSuccess([latLng.lat(), latLng.lng()]);
};
@@ -476,6 +504,37 @@ PluginMap.prototype.toDataURL = function(onSuccess, onError, args) {
onError('map.toDataURL() is not available for this platform.');
};
+PluginMap.prototype._syncInfoWndPosition = function() {
+ var self = this;
+
+ if (!self.activeMarker) {
+ return;
+ }
+
+ var latLng = self.activeMarker.getPosition();
+ var map = self.get("map");
+
+ var projection = map.getProjection(),
+ bounds = map.getBounds(),
+ ne = bounds.getNorthEast(),
+ sw = bounds.getSouthWest(),
+ zoom = map.getZoom();
+
+
+ var topRight = projection.fromLatLngToPoint(ne);
+ var bottomLeft = projection.fromLatLngToPoint(sw);
+ var scale = Math.pow(2, zoom);
+ var worldPoint = projection.fromLatLngToPoint(latLng);
+ var x = (worldPoint.x - bottomLeft.x) * scale;
+ var y = (worldPoint.y - topRight.y) * scale;
+
+ plugin.google.maps[self.id]({
+ 'evtName': 'syncPosition',
+ 'callback': '_onSyncInfoWndPosition',
+ 'args': [{'x': x, 'y': y}]
+ });
+};
+
PluginMap.prototype._onMapEvent = function(evtName, evt) {
var self = this,
map = self.get("map");
@@ -522,6 +581,7 @@ PluginMap.prototype._onCameraEvent = function(evtName) {
ne = bounds.getNorthEast(),
sw = bounds.getSouthWest();
+ self._syncInfoWndPosition();
var cameraInfo = {
'target': {'lat': center.lat(), 'lng': center.lng()},

MODIFY
src/browser/PluginMarker.js
src/browser/PluginMarker.js
@@ -13,6 +13,11 @@ function PluginMarker(pluginMap) {
enumerable: false,
writable: false
});
+ Object.defineProperty(self, "infoWnd", {
+ value: null,
+ enumerable: false,
+ writable: true
+ });
}
utils.extend(PluginMarker, BaseClass);
@@ -152,13 +157,18 @@ PluginMarker.prototype.showInfoWindow = function(onSuccess, onError, args) {
var overlayId = args[0];
var marker = self.pluginMap.objects[overlayId];
if (marker) {
- onMarkerClick.call(marker);
+ self.pluginMap.activeMarker = marker;
+ onMarkerClick.call(self, marker);
}
onSuccess();
};
PluginMarker.prototype.hideInfoWindow = function(onSuccess, onError, args) {
var self = this;
- infoWnd.close();
+ var overlayId = args[0];
+ if (self.infoWnd) {
+ self.infoWnd.close();
+ self.infoWnd = null;
+ }
onSuccess();
};
PluginMarker.prototype.setIcon = function(onSuccess, onError, args) {
@@ -227,18 +237,19 @@ PluginMarker.prototype._onMarkerEvent = function(marker, evtName) {
};
module.exports = PluginMarker;
-var infoWnd = null;
-function onMarkerClick() {
- if (!infoWnd) {
- infoWnd = new google.maps.InfoWindow();
+function onMarkerClick(marker) {
+ var self = this;
+ if (!self.infoWnd) {
+ self.infoWnd = new google.maps.InfoWindow();
}
- var marker = this;
+ self.pluginMap.activeMarker = marker;
+ self.pluginMap._syncInfoWndPosition.call(self);
var maxWidth = marker.getMap().getDiv().offsetWidth * 0.7;
var content = marker.get('content');
- infoWnd.setOptions({
+ self.infoWnd.setOptions({
content: content,
disableAutoPan: marker.disableAutoPan,
maxWidth: maxWidth
});
- infoWnd.open(marker.getMap(), marker);
+ self.infoWnd.open(marker.getMap(), marker);
}

MODIFY
www/HtmlInfoWindow.js
www/HtmlInfoWindow.js
+
var utils = require('cordova/utils'),
event = require('./event'),
common = require('./Common'),

MODIFY
www/Map.js
www/Map.js
+
var utils = require('cordova/utils'),
cordova_exec = require('cordova/exec'),
common = require('./Common'),
@@ -46,7 +47,7 @@ var Map = function(id, _exec) {
infoWindowLayer.style.width = 0;
infoWindowLayer.style.height = 0;
infoWindowLayer.style.overflow = "visible";
- infoWindowLayer.style["z-index"] = 0;
+ infoWindowLayer.style["z-index"] = 1;
Object.defineProperty(self, "_layers", {
value: {

Fix: HtmlInfoWindow does not work on browser platform