Cordova-plugin-googlemaps: Can't use markers functions with clustering
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')
});
});
});
guillenotfound
All 27 comments
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')
});
Flo-D
on 4 Sep 2017
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.
guillenotfound
on 4 Sep 2017
Did you try to reinstall the @ ionic-native / core and @ ionic-native google-maps plugins?
wf9a5m75
on 4 Sep 2017
Hey, sorry for the delay...
Indeed, I reinstall the whole project and keeps happening. I'll try now on iOS.
guillenotfound
on 5 Sep 2017
@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
on 5 Sep 2017
wf9a5m75
on 5 Sep 2017
I can see both objects so that's not the issue.
I'll share a demo with you tomorrow.
guillenotfound
on 5 Sep 2017
Ok, I will wait.
wf9a5m75
on 5 Sep 2017
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
Flo-D
on 6 Sep 2017
@Flo-D code looks good to me your code (similar to mine), can you review it @wf9a5m75 ?
guillenotfound
on 6 Sep 2017
His issue was solved already.
wf9a5m75
on 6 Sep 2017
@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.
wf9a5m75
on 6 Sep 2017
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
on 7 Sep 2017
Here you have:
[email protected]: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.
guillenotfound
on 7 Sep 2017
@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
on 7 Sep 2017
@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');
});
});
Ok, I sent a PR.
https://github.com/ionic-team/ionic-native/pull/1956
wf9a5m75
on 8 Sep 2017
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
on 18 Sep 2017
wf9a5m75
on 19 Sep 2017
Luckily, the fundraising is reached to the end quickly, I restart to support the again.
I reopened the PR.
wf9a5m75
on 21 Sep 2017
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
wf9a5m75
on 28 Sep 2017
Hey @wf9a5m75
Sorry but I didn't have so much time to test it, just copied your snniped from: https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1706#issuecomment-327877083
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!
guillenotfound
on 30 Sep 2017
You guys also have to update the maps plugin
wf9a5m75
on 30 Sep 2017
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/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic-native/[email protected]
├── @ionic/[email protected]
├── @ionic/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] (git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#0addb071b77be74cc1813cedea0797a207522628)
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
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
on 5 Oct 2017
I sent another PR.
wf9a5m75
on 6 Oct 2017
@ionic-native/google-maps v4.3.1 has been released. Please use it with the multiple_maps branch.
wf9a5m75
on 6 Oct 2017
Related issues
Tong2203
·
5Comments
ahmadkam72
·
3Comments
rosnaib11
·
5Comments
lakano
·
4Comments
splitice
·
5Comments
Most helpful comment
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-mapswrapper plugin.The wrapper plugin takes overhead (such as converting instances). It means slow (bad performance) than pure JS plugin.