Marker issues when using MarkerCluster (icon color won't change, clicking doesn't open info window)

ndrake commented 5 years ago

I'm submitting a ... (check one with "x")

[ ] question
[x] any problem or bug report
[ ] feature request

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

[ ] Android
[ ] iOS
[x] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.5.0 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.3.3 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

    "@ionic-native/core": "^5.0.0",
    "@ionic-native/google-maps": "^5.0.0-beta.26"

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (/Users/ndrake/.nvm/versions/node/v10.15.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.3, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/ndrake/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v10.15.0 (/Users/ndrake/.nvm/versions/node/v10.15.0/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

Current behavior:

Using color names for marker icons doesn't seem to work on the browser platform for markers in an MarkerCluster. The color never changes (it does change on Android). Also, clicking on individual markers doesn't seem to display the info window on the browser platform.

Expected behavior:

Icon color changes and markers are clickable

Screen capture or video record:

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

I was able to reproduce this with your demo project: https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4.

Steps:

git clone git@github.com:mapsplugin/ionic-googlemaps-quickdemo-v4.git
cd ionic-googlemaps-quickdemo-v4
npm install
Edit config.xml and package.xml with my Google Maps API keys
ionic cordova platform add browser
Edit src/app/marker-cluster/marker-cluster.page.ts and replace all instances of "assets/markercluster/marker.png" with "green"
Run the app: ionic cordova run browser -l
Navigate to the MarkerCluster demo page and zoom in until you see individual markers
Notice the Markers are the default red color instead of green
Click on a Marker and notice that now info window pops up

wf9a5m75 commented 5 years ago

Please share the reproduce project files on github, not steps.

ndrake commented 5 years ago

You can find an updated version of the demo project here:

https://github.com/ndrake/ionic-googlemaps-quickdemo-v4

wf9a5m75 commented 5 years ago

Please reinstall

cordova-plugin-googlemaps v2.5.1
@ionic-native/google-maps v5.0.0-beta.27

ndrake commented 5 years ago

Thanks! Those versions fixed the issues I was seeing with icon coloring and marker clicking. There does seem to be a new issue when removing a MarkerCluster. When I call mCluster.remove() or navigate away from the map page (causing it to be removed), I see an error like this in the console (this specific one is from Android when navigating away from the map page):

Unhandled Promise rejection: Cannot read property 'replace' of null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'replace' of null
    at MarkerCluster.remove (MarkerCluster.js:286)
    at clearObj (Map.js:717)
    at Map.remove (Map.js:726)
    at js_CordovaGoogleMaps-for-android_ios.js:526
    at Array.forEach (<anonymous>)
    at CordovaGoogleMaps.removeDomTree (js_CordovaGoogleMaps-for-android_ios.js:513)
    at js_CordovaGoogleMaps-for-android_ios.js:83
    at Array.forEach (<anonymous>)
    at js_CordovaGoogleMaps-for-android_ios.js:78
    at Array.forEach (<anonymous>) TypeError: Cannot read property 'replace' of null
    at MarkerCluster.remove (http://localhost:8080/plugins/cordova-plugin-googlemaps/www/MarkerCluster.js:286:35)
    at clearObj (http://localhost:8080/plugins/cordova-plugin-googlemaps/www/Map.js:717:20)
    at Map.remove (http://localhost:8080/plugins/cordova-plugin-googlemaps/www/Map.js:726:3)
    at http://localhost:8080/plugins/cordova-plugin-googlemaps/www/js_CordovaGoogleMaps-for-android_ios.js:526:28
    at Array.forEach (<anonymous>)
    at CordovaGoogleMaps.removeDomTree (http://localhost:8080/plugins/cordova-plugin-googlemaps/www/js_CordovaGoogleMaps-for-android_ios.js:513:12)
    at http://localhost:8080/plugins/cordova-plugin-googlemaps/www/js_CordovaGoogleMaps-for-android_ios.js:83:34
    at Array.forEach (<anonymous>)
    at http://localhost:8080/plugins/cordova-plugin-googlemaps/www/js_CordovaGoogleMaps-for-android_ios.js:78:66

The following is from Android when my code calls cluster.remove():

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'replace' of null
TypeError: Cannot read property 'replace' of null
    at MarkerCluster.remove (plugins/cordova-plugin-googlemaps/www/MarkerCluster.js:286)
    at callInstance (vendor.js:85890)
    at vendor.js:86070
    at vendor.js:85649
    at new ZoneAwarePromise (polyfills.js:3255)
    at tryNativePromise (vendor.js:85648)
    at getPromise (vendor.js:85668)
    at vendor.js:86053
    at cordovaInstance (vendor.js:86139)
    at MarkerCluster.push../node_modules/@ionic-native/google-maps/ngx/index.js.MarkerCluster.remove (vendor.js:88548)
    at resolvePromise (polyfills.js:3176)
    at new ZoneAwarePromise (polyfills.js:3258)
    at tryNativePromise (vendor.js:85648)
    at getPromise (vendor.js:85668)
    at vendor.js:86053
    at cordovaInstance (vendor.js:86139)
    at MarkerCluster.push../node_modules/@ionic-native/google-maps/ngx/index.js.MarkerCluster.remove (vendor.js:88548)
    at DashboardPage.push../src/app/dashboard/dashboard.page.ts.DashboardPage.updateCluster (dashboard-dashboard-module.js:425)
    at DashboardPage.<anonymous> (dashboard-dashboard-module.js:552)
    at step (vendor.js:145853)

I have updated my sample project with a "Remove Cluster" link to demonstrate the issue:

https://github.com/ndrake/ionic-googlemaps-quickdemo-v4

wf9a5m75 commented 5 years ago

Thank you, I fixed it. I appreciate if you send a pull request instead just error reporting.

wf9a5m75 commented 5 years ago

Fixed in v2.5.2

ionic-team / ionic-native-google-maps

Marker issues when using MarkerCluster (icon color won't change, clicking doesn't open info window) #173