(JS) Fix: Marker issues when using MarkerCluster (icon color won't change, clicking doesn't open info window)
MODIFY
README.md
README.md
- Fix: (Android/iOS/Browser) Marker cluster does not work when you zoom in.
- Fix: (iOS) HTML click detection is incorrect.
- Fix: (Android/iOS) Clicking on POI with an apostrophe in its name causes a SyntaxError.
+ - Fix: (Browser) Can not set icon color for marker cluster icons.
- **v2.5.0**
- Add: (Android/iOS/Browser) Support `promise` for `TileOverlayOptions.getTile`. You must return new URL in 5 seconds.

MODIFY
package.json
package.json
{
"name": "cordova-plugin-googlemaps",
- "version": "2.5.1-beta-20190217-2133",
+ "version": "2.5.1-beta-20190217-2219",
"description": "Google Maps native SDK for Android and iOS, and Google Maps JavaScript API v3 for browser.",
"cordova": {
"id": "cordova-plugin-googlemaps",

MODIFY
plugin.xml
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
-<plugin id="cordova-plugin-googlemaps" version="2.5.1-beta-20190217-2133" 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.5.1-beta-20190217-2219" 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="Promise" src="www/Promise.js" />
<asset src="www/promise-7.0.4.min.js.map" target="promise-7.0.4.min.js.map" />

MODIFY
src/browser/PluginMarker.js
src/browser/PluginMarker.js
@@ -48,6 +48,11 @@ PluginMarker.prototype.__create = function(markerId, pluginOptions, onSuccess, o
if (pluginOptions.icon) {
var icon = pluginOptions.icon;
markerOpts.icon = {};
+ if (Array.isArray(pluginOptions.icon) && pluginOptions.icon.length === 4) {
+ pluginOptions.icon = {
+ 'url': pluginOptions.icon
+ };
+ }
if (typeof pluginOptions.icon === 'string') {
// Specifies path or url to icon image
markerOpts.icon.url = pluginOptions.icon;

MODIFY
www/MarkerCluster.js
www/MarkerCluster.js
-
/* eslint no-useless-escape: off */
var utils = require('cordova/utils'),
@@ -138,7 +137,11 @@ var MarkerCluster = function (map, markerClusterOptions, _exec) {
};
var marker = self._createMarker(markerOptions);
- var markerId = marker.__pgmId;
+ var markerId = marker.__pgmId.replace(/^.+-/, '');
+ Object.defineProperty(marker, '__cid', {
+ value: markerId,
+ writable: false
+ });
self._markerMap[markerId] = marker;
if (skipRedraw || !self._isReady) {
return marker;
@@ -279,12 +282,13 @@ MarkerCluster.prototype.remove = function (callback) {
self.trigger('remove');
var activeMarkerId = activeMarker ? activeMarker.getId() : null;
+ activeMarkerId = activeMarkerId.replace(/^.+\-/, '');
var marker;
if (resolution === self.OUT_OF_RESOLUTION) {
while (self._clusters[resolution].length > 0) {
marker = self._clusters[resolution].shift();
- deleteClusters.push(marker.__pgmId);
- if (marker.__pgmId === activeMarkerId) {
+ deleteClusters.push(marker.__cid);
+ if (marker.__cid === activeMarkerId) {
marker.trigger(event.INFO_CLOSE);
marker.hideInfoWindow();
}
@@ -296,11 +300,11 @@ MarkerCluster.prototype.remove = function (callback) {
var noClusterMode = cluster.getMode() === cluster.NO_CLUSTER_MODE;
if (noClusterMode) {
cluster.getMarkers().forEach(function (marker) {
- if (marker.__pgmId === activeMarkerId) {
+ if (marker.__cid === activeMarkerId) {
marker.trigger(event.INFO_CLOSE);
marker.hideInfoWindow();
}
- deleteClusters.push(marker.__pgmId);
+ deleteClusters.push(marker.__cid);
});
}
if (!noClusterMode) {
@@ -351,7 +355,7 @@ Object.defineProperty(MarkerCluster.prototype, '_removeMarkerById', {
if (self._isRemoved) {
return null;
}
- //if (markerId.indexOf(self.__pgmId + '-') === -1) {
+ //if (markerId.indexOf(self.__cid + '-') === -1) {
//}
var marker = self._markerMap[markerId];
if (!marker) {
@@ -605,10 +609,10 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
while (self._clusters[self.OUT_OF_RESOLUTION].length > 0) {
marker = self._clusters[self.OUT_OF_RESOLUTION].shift();
marker.get('_cluster').isAdded = false;
- markerId = marker.__pgmId;
+ markerId = marker.__cid;
deleteClusters[markerId] = 1;
- if (marker.__pgmId === activeMarkerId) {
+ if (marker.__cid === activeMarkerId) {
marker.trigger(event.INFO_CLOSE);
marker.hideInfoWindow();
}
@@ -666,13 +670,13 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
if (cluster.getMode() === cluster.NO_CLUSTER_MODE) {
cluster.getMarkers().forEach(function (marker) {
- var markerId = marker.__pgmId;
+ var markerId = marker.__cid;
deleteClusters[markerId] = 1;
marker.get('_cluster').isAdded = false;
if (self.debug) {
console.log('---> (js:534)delete:' + markerId);
}
- if (marker.__pgmId === activeMarkerId) {
+ if (marker.__cid === activeMarkerId) {
marker.trigger(event.INFO_CLOSE);
marker.hideInfoWindow();
}
@@ -733,14 +737,14 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
self._stopRequest) {
return;
}
- var markerId = marker.__pgmId;
+ var markerId = marker.__cid;
marker.get('_cluster').isAdded = false;
//targetMarkers.push(markerOpts);
if (noClusterMode) {
if (self.debug) {
console.log('---> (js:581)delete:' + markerId);
}
- if (marker.__pgmId === activeMarkerId) {
+ if (marker.__cid === activeMarkerId) {
marker.trigger(event.INFO_CLOSE);
marker.hideInfoWindow();
}
@@ -769,12 +773,12 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
var noClusterMode = cluster.getMode() === cluster.NO_CLUSTER_MODE;
cluster.getMarkers().forEach(function (marker) {
marker.get('_cluster').isAdded = false;
- var markerId = marker.__pgmId;
+ var markerId = marker.__cid;
if (noClusterMode) {
if (self.debug) {
console.log('---> (js:614)delete:' + markerId);
}
- if (marker.__pgmId === activeMarkerId) {
+ if (marker.__cid === activeMarkerId) {
marker.trigger(event.INFO_CLOSE);
marker.hideInfoWindow();
}
@@ -891,7 +895,7 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
prepareClusters[geocell] = prepareClusters[geocell] || [];
prepareClusters[geocell].push(marker);
- if (marker && marker.__pgmId === activeMarkerId) {
+ if (marker && marker.__cid === activeMarkerId) {
marker.trigger(event.INFO_CLOSE);
marker.hideInfoWindow();
}
@@ -967,7 +971,7 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
clusterOpts.isClusterIcon = true;
if (cluster.getMode() === cluster.NO_CLUSTER_MODE) {
cluster.getMarkers().forEach(function (marker) {
- var markerId = marker.__pgmId;
+ var markerId = marker.__cid;
deleteClusters[markerId] = 1;
if (self.debug) {
console.log('---> (js:800)delete:' + markerId);
@@ -1007,7 +1011,7 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
if (!marker.get('_cluster').isAdded) {
return;
}
- var markerId = marker.__pgmId;
+ var markerId = marker.__cid;
delete deleteClusters[markerId];
marker.get('_cluster').isClusterIcon = false;
if (self.debug) {
@@ -1027,7 +1031,7 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
if (marker.get('_cluster').isAdded) {
return;
}
- var markerId = marker.__pgmId;
+ var markerId = marker.__cid;
marker.get('_cluster').isClusterIcon = false;
if (self.debug) {
console.log('---> (js:859)add:' + markerId);
@@ -1035,7 +1039,9 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
}
delete deleteClusters[markerId];
marker.get('_cluster').isAdded = true;
- new_or_update_clusters.push(marker.getOptions());
+ var opts = marker.getOptions();
+ opts.__pgmId = marker.__cid;
+ new_or_update_clusters.push(opts);
self._clusters[self.OUT_OF_RESOLUTION].push(marker);
});
}
@@ -1084,11 +1090,11 @@ Object.defineProperty(MarkerCluster.prototype, '_redraw', {
}], {
sync: true
});
- // console.log({
- // 'resolution': resolution,
- // 'new_or_update': new_or_update_clusters,
- // 'delete': delete_clusters
- // });
+ console.log({
+ 'resolution': resolution,
+ 'new_or_update': new_or_update_clusters,
+ 'delete': delete_clusters
+ });
}
});
@@ -1121,7 +1127,7 @@ MarkerCluster.prototype.getClusterIcon = function (cluster) {
MarkerCluster.prototype._createMarker = function (markerOpts) {
var self = this;
- var markerId = 'marker_' + Math.floor(Date.now() * Math.random());
+ var markerId = self.getId() + '-marker_' + Math.floor(Date.now() * Math.random());
var marker = new Marker(self.getMap(), markerOpts, exec, {
className: 'MarkerCluster',
__pgmId: markerId

(JS) Fix: Marker issues when using MarkerCluster (icon color won't change, clicking doesn't open info window)
https://github.com/ionic-team/ionic-native-google-maps/issues/173