Can't use markers functions with clustering

[guillenotfound]

I'm submitting a ... (check one with "x")
[ ] question
[ x ] any problem or bug report
[ ] feature request

The plugin version: (check one with "x")
[ ] 1.4.x
[ x ] 2.0.0-beta3

If you choose 'problem or bug report', please select OS: (check one with "x")
[ x ] Android
[ ] iOS

cordova information: (run $> cordova plugin list)

cordova-custom-config 4.0.2 "cordova-custom-config"
cordova-open-native-settings 1.4.1 "Native settings"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.0.0-beta3-20170903-1743 "cordova-plugin-googlemaps"
cordova-plugin-mixpanel 3.1.0 "Mixpanel"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-request-location-accuracy 2.2.2 "Request Location Accuracy"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-wkwebview-engine 1.1.4-dev "Cordova WKWebView Engine"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
cordova.plugins.diagnostic 3.6.6 "Diagnostic"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-deeplinks 1.0.15 "Ionic Deeplink Plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-push 1.10.5 "PushPlugin"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.0.4 "Launch Navigator"

Current behavior:
When adding the marker cluster, clicking on a markers causes:
Uncaught TypeError: marker.one(...).then is not a function

Expected behavior:
Should be able to use a marker like I would without clustering.

Steps to reproduce:
Create a map with clustering & do something on infoWindow click.
If I remove marker.one(...) it works, but how can I handle infoWindow click?

Screen capture or video record:

(I know this is not the error since the InfoWindow opens automatically, but it's the same kind of error)

Related code, data or error log (please format your code or data):

        this.map.addMarkerCluster({
          boundsDraw: false,
          markers: markers,
          icons: [
            {min: 2, max: 100, url: 'assets/img/blue.png', anchor: {x: 16, y: 16}},
            {min: 100, max: 1000, url: 'assets/img/yellow.png', anchor: {x: 16, y: 16}},
            {min: 1000, max: 2000, url: 'assets/img/purple.png', anchor: {x: 24, y: 24}},
            {min: 2000, max: 5000, url: 'assets/img/red.png', anchor: {x: 32, y: 32}}
          ]
        }).then((markerCluster: MarkerCluster) => {
          markerCluster.on(GoogleMapsEvent.MARKER_CLICK).subscribe((arr: any) => {
            console.log('marker click');
            marker = arr[1];

            marker.one(GoogleMapsEvent.INFO_CLICK).then(() => {
              console.log('info-click')
            });
          });
        });

[Flo-D]

Did you try to replace .then() by .subscribe() ?

Change

marker.one(GoogleMapsEvent.INFO_CLICK).then(() => {
  console.log('info-click')
});

To

marker.one(GoogleMapsEvent.INFO_CLICK).subscribe(() => {
  console.log('info-click')
});

[guillenotfound]

Hello @Flo-D

I doesn't work that way, check the source code of ionic-native:

One works with promises:
https://github.com/ionic-team/ionic-native/blob/master/src/%40ionic-native/plugins/google-maps/index.ts#L745

On works with promises:
https://github.com/ionic-team/ionic-native/blob/master/src/%40ionic-native/plugins/google-maps/index.ts#L737

The matter is that I can't access any method from the marker when it's being created from the MarkerCluster.

|------------------------------------------|

Also there's another problem, usually you would do:
marker.set('some-variable')

Since you'd be iterating over an object, create the markers inside a loop and set any data if needed, now we pass an array of markers, and we must find another way to append data to those makers, or identify them, have to think on it.

[wf9a5m75]

Did you try to reinstall the @ ionic-native / core and @ ionic-native google-maps plugins?

[guillenotfound]

Hey, sorry for the delay...

Indeed, I reinstall the whole project and keeps happening. I'll try now on iOS.

[wf9a5m75]

@ZiFFeL1992 Please share your project files on github (or others).
If you don't want to share your project files, please create a demo project, and share it.

[wf9a5m75]

danielsogl/awesome-cordova-plugins#1935 (comment)

[guillenotfound]

I can see both objects so that's not the issue.

I'll share a demo with you tomorrow.

[wf9a5m75]

Ok, I will wait.

[Flo-D]

Hi guys, now that this issue is closed, I got the same error as @ZiFFeL1992

I've updated my repo : https://github.com/Flo-D/test-google-maps-cluster

[guillenotfound]

@Flo-D code looks good to me your code (similar to mine), can you review it @wf9a5m75 ?

[wf9a5m75]

His issue was solved already.

[wf9a5m75]

@ZiFFeL1992 If you don't want to share any information (your project files, or demo project), I will close this thread, because there is no enough information.

[guillenotfound]

What I mean is that after he fixed his error passing multiple arguments, he now has the same issue that I have, and as he said, he has updated the repo so you can reproduce my error in his repository.

Creating a demo by the way...

[guillenotfound]

Here you have:
git@github.com:ZiFFeL1992/test-google-maps-cluster.git

Is based on @Flo-D code since it reproduces this issue, you have two branches, they do the same, one has ionic-native (master) and the other one (no-native) works fine because it doesn't use the wrapper so might be something related with the ionic-native wrapper.

Let me know if I can help,
thanks.

[wf9a5m75]

@ihadeed

This is the problem of @ionic-native/google-maps.
As we discussed before, on and one does not convert the instance of JS plugin to the @ionic-native/google-maps.

In order to solve this problem, I implemented the FakeObeserval() and Promise, but you didn't prefer it.

In order to solve this problem perfectly, the one() and the on() methods need to convert the marker instance from JS to the @ionic-native/google-maps.

[wf9a5m75]

@ZiFFeL1992 and @Flo-D

The marker instance is the JS instance, not the @ionic-native/google-maps class one.

That's why you need to write like this:

markerCluster.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => {
  let latLng: LatLng = params[0];
  let marker: any = params[1];

  console.log(params);
  console.log(latLng);
  console.log(marker);

  marker.setAnimation(GoogleMapsAnimation.BOUNCE);

  marker.one(GoogleMapsEvent.INFO_CLICK, function() {
    console.log('info click');
  });
});

[wf9a5m75]

Ok, I sent a PR.
danielsogl/awesome-cordova-plugins#1956

[wf9a5m75]

Sorry, after the discussion with the ionic team, I don't support the @ionic-native/google-maps anymore. Please ask to the ionic-native repository.

[wf9a5m75]

#1749

[wf9a5m75]

Luckily, the fundraising is reached to the end quickly, I restart to support the again.
I reopened the PR.

[wf9a5m75]

The PR is merged, and published as @ionic-native/google-maps ver 4.3.0.
Please reinstall the @ionic-native/google-maps plugin.
https://www.npmjs.com/package/@ionic-native/google-maps

[guillenotfound]

Hey @wf9a5m75

Sorry but I didn't have so much time to test it, just copied your snniped from: #1706 (comment)

Result:

As you can see I'm getting the LatLng property but Marker seems to be undefined.

I reinstalled all the plugins, platform and npm modules, also I'm in 4.3.0 of ionic-native....

Thanks for supporting Ionic again!

[wf9a5m75]

You guys also have to update the maps plugin

[guillenotfound]

As I said in my previous comment, I reinstalled all dependencies to latests versions before reporting again.

com.googlemaps.ios 2.4.0 "Google Maps SDK for iOS"
cordova-custom-config 4.0.2 "cordova-custom-config"
cordova-open-native-settings 1.4.1 "Native settings"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.0.11 "cordova-plugin-googlemaps"
cordova-plugin-ionic-webview 1.1.8 "Ionic's WKWebView Engine"
cordova-plugin-mixpanel 4.0.0 "Mixpanel"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-request-location-accuracy 2.2.2 "Request Location Accuracy"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-wkwebview-engine 1.1.3 "Cordova WKWebView Engine"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
cordova.plugins.diagnostic 3.6.7 "Diagnostic"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-deeplinks 1.0.15 "Ionic Deeplink Plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-push 2.0.0 "PushPlugin"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.0.5 "Launch Navigator"

├── @angular/common@4.4.3
├── @angular/compiler@4.4.3
├── @angular/compiler-cli@4.4.3
├── @angular/core@4.4.3
├── @angular/forms@4.4.3
├── @angular/http@4.4.3
├── @angular/platform-browser@4.4.3
├── @angular/platform-browser-dynamic@4.4.3
├── @ionic-native/core@4.3.0
├── @ionic-native/deeplinks@4.3.0
├── @ionic-native/device@4.3.0
├── @ionic-native/diagnostic@4.3.0
├── @ionic-native/file@4.3.0
├── @ionic-native/file-transfer@4.3.0
├── @ionic-native/geolocation@4.3.0
├── @ionic-native/google-maps@4.3.0
├── @ionic-native/keyboard@4.3.0
├── @ionic-native/launch-navigator@4.3.0
├── @ionic-native/location-accuracy@4.3.0
├── @ionic-native/mixpanel@4.3.0
├── @ionic-native/network@4.3.0
├── @ionic-native/push@4.3.0
├── @ionic-native/social-sharing@4.3.0
├── @ionic-native/splash-screen@4.3.0
├── @ionic-native/status-bar@4.3.0
├── @ionic/app-scripts@3.0.0
├── @ionic/storage@2.0.1
├── cordova-android@6.3.0
├── cordova-custom-config@4.0.2
├── cordova-ios@4.5.1
├── cordova-open-native-settings@1.4.1
├── cordova-plugin-actionsheet@2.3.3
├── cordova-plugin-compat@1.2.0
├── cordova-plugin-device@1.1.6
├── cordova-plugin-dialogs@1.3.3
├── cordova-plugin-file@4.3.3
├── cordova-plugin-file-transfer@1.6.3
├── cordova-plugin-geolocation@2.4.3
├── cordova-plugin-googlemaps@2.0.11
├── cordova-plugin-googlemaps-sdk@2.4.0 (git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#0addb071b77be74cc1813cedea0797a207522628)
├── cordova-plugin-ionic-webview@1.1.9
├── cordova-plugin-mixpanel@4.0.0
├── cordova-plugin-network-information@1.3.3
├── cordova-plugin-request-location-accuracy@2.2.2
├── cordova-plugin-splashscreen@4.0.3
├── cordova-plugin-statusbar@2.2.3
├── cordova-plugin-whitelist@1.3.2
├── cordova-plugin-wkwebview-engine@1.1.3
├── cordova-plugin-x-socialsharing@5.2.0
├── cordova.plugins.diagnostic@3.6.7
├── es6-promise-plugin@4.1.0
├── help@3.0.2
├── ionic-angular@3.7.0
├── ionic-image-loader@4.2.1
├── ionic-plugin-deeplinks@1.0.15
├── ionic-plugin-keyboard@2.2.1
├── ionicons@3.0.0
├── phonegap-plugin-push@2.0.0
├── rxjs@5.4.3
├── sw-toolbox@3.6.0
├── typescript@2.3.3
├── uk.co.workingedge.phonegap.plugin.launchnavigator@4.0.5
└── zone.js@0.8.17

[wf9a5m75]

Unfortunately, you still have to wait the next update. Because the PR implementation was changed after I sent the PR first time.

As the author of this plugin, I recommend you use this plugin without the @ionic-native/google-maps wrapper plugin.
The wrapper plugin takes overhead (such as converting instances). It means slow (bad performance) than pure JS plugin.

[wf9a5m75]

I sent another PR.

[wf9a5m75]

@ionic-native/google-maps v4.3.1 has been released. Please use it with the multiple_maps branch.