search

mapsplugin / cordova-plugin-googlemaps

Google Maps plugin for Cordova
Apache License 2.0
1.66k stars 918 forks source link

Markers are not removed from them map (erased) #2863

Open pdanysz opened 3 years ago

pdanysz commented 3 years ago

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

OS: (check one with "x")

cordova information: (run $> cordova plugin list) 

com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "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)

"cordova-plugin-googlemaps": "^2.7.1",
"cordova-plugin-googlemaps-sdk": "github:mapsplugin/cordova-plugin-googlemaps-sdk",
"@ionic-native/core": "^5.32.0",
"@ionic-native/google-maps": "^5.5.0",

Current behavior:

Markers are not removed from the map when animation is playing (or the camera moving). For example, when you add Marker (by clicking a button) and Marken Pin is bouncing, you can not remove it during the animation (it is removed on code level, but a map is not removing it (erase)). The same problem I encounter when camera is moving from one location to another.

Expected behavior:

Remove Marker (erase) from them map even animation is playing (bouncing pin, camera moving).

Screen capture or video record:

Check Video on YT: https://youtu.be/CYW8E1oVMUU

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

Demo code is available on git: https://github.com/pdanysz/ionic-googlemaps-issue-demo There are also steps to reproduce this error/bug/feature? :)

Support this plugin activity

I appreciate if you give me a beer :beer: from here - I will do :)

Thanks in advance!

pdanysz commented 3 years ago

I found out that the main problem with removing markers from the map is when the animation (drop/bouncing the pin) is executed. During that animation REMOVE command is not send to Cordova Plugin (Java or IOS classes). I can't find where exactly the problem is because I'm not familiar with Crodova plugins and plugin environments.

In the log below you will see more "loadPlugin" action than "remove", but those executions shall be equal.

Maybe that helps find where the problem is. I modified some Java classes to log more details.

04-23 19:21:48.390 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:21:48.393 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:21:48.398 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:21:48.462 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:21:48.464 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:21:48.468 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:loadPlugin
04-23 19:21:48.468 23646 23745 I MyPlugin:execute(): Action:loadPlugin Data:["Marker",{"icon":[74,137,243,255],"position":{"lat":43.0741004,"lng":-89.3800802},"animation":"BOUNCE","draggable":false,"zIndex":0,"visible":true,"flat":false,"rotation":0,"opacity":1,"disableAutoPan":false,"noCache":false},966507070763]
04-23 19:21:48.468 23646 23793 D map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:21:48.468 23646 23793 I map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:21:48.469 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:animateCamera
04-23 19:21:48.469 23646 23745 I MyPlugin:execute(): Action:animateCamera Data:[{"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}]
04-23 19:21:48.469 23646 23793 D map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:21:48.469 23646 23793 I map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:21:48.470 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:21:48.662 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:21:48.664 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:21:48.674 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:21:56.158 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:21:56.160 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:21:56.163 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:21:56.228 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:21:56.230 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:21:56.235 23646 23646 I chromium: [INFO:CONSOLE(137)] "Marker.remove() [object Object]", source: http://localhost/plugins/cordova-plugin-googlemaps/www/Marker.js (137)
04-23 19:21:56.236 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:remove
04-23 19:21:56.236 23646 23745 I MyPlugin:execute(): Action:remove Data:["marker_966507070763"]
04-23 19:21:56.236 23646 23793 I MyPlugin:execute():submit: TAG:map_0_111012966863-marker
04-23 19:21:56.237 23646 23793 D map_0_111012966863-marker: (debug)action=remove args[0]=marker_966507070763
04-23 19:21:56.237 23646 23793 I map_0_111012966863-marker: (debug)action=remove args[0]=marker_966507070763
04-23 19:21:56.237 23646 23793 I Marker:remove(): Removing Marker on Clicking! id:marker_966507070763
04-23 19:21:56.239 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:21:56.427 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:21:56.429 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:21:56.430 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:02.371 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:02.373 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:02.376 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:02.458 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:02.461 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:02.467 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:loadPlugin
04-23 19:22:02.467 23646 23745 I MyPlugin:execute(): Action:loadPlugin Data:["Marker",{"icon":[74,137,243,255],"position":{"lat":43.0741004,"lng":-89.3800802},"animation":"BOUNCE","draggable":false,"zIndex":0,"visible":true,"flat":false,"rotation":0,"opacity":1,"disableAutoPan":false,"noCache":false},1548810901314]
04-23 19:22:02.468 23646 23793 D map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:22:02.468 23646 23793 I map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:22:02.468 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:animateCamera
04-23 19:22:02.469 23646 23745 I MyPlugin:execute(): Action:animateCamera Data:[{"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}]
04-23 19:22:02.469 23646 23793 D map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:22:02.469 23646 23793 I map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:22:02.471 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:02.657 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:02.658 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:02.659 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:02.903 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:02.904 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:02.908 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:02.985 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:02.986 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:02.987 23646 23646 I chromium: [INFO:CONSOLE(137)] "Marker.remove() [object Object]", source: http://localhost/plugins/cordova-plugin-googlemaps/www/Marker.js (137)
04-23 19:22:02.998 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.066 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.067 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.074 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.153 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.154 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.161 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:loadPlugin
04-23 19:22:03.161 23646 23745 I MyPlugin:execute(): Action:loadPlugin Data:["Marker",{"icon":[74,137,243,255],"position":{"lat":43.0741004,"lng":-89.3800802},"animation":"BOUNCE","draggable":false,"zIndex":0,"visible":true,"flat":false,"rotation":0,"opacity":1,"disableAutoPan":false,"noCache":false},1603827773795]
04-23 19:22:03.161 23646 23793 D map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:22:03.161 23646 23793 I map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:22:03.162 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:animateCamera
04-23 19:22:03.162 23646 23745 I MyPlugin:execute(): Action:animateCamera Data:[{"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}]
04-23 19:22:03.162 23646 23793 D map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:22:03.162 23646 23793 I map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:22:03.163 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.218 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.219 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.225 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.315 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.316 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.317 23646 23646 I chromium: [INFO:CONSOLE(137)] "Marker.remove() [object Object]", source: http://localhost/plugins/cordova-plugin-googlemaps/www/Marker.js (137)
04-23 19:22:03.325 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.382 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.383 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.392 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.460 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.462 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.464 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.466 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:loadPlugin
04-23 19:22:03.466 23646 23745 I MyPlugin:execute(): Action:loadPlugin Data:["Marker",{"icon":[74,137,243,255],"position":{"lat":43.0741004,"lng":-89.3800802},"animation":"BOUNCE","draggable":false,"zIndex":0,"visible":true,"flat":false,"rotation":0,"opacity":1,"disableAutoPan":false,"noCache":false},642505703458]
04-23 19:22:03.466 23646 23793 D map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:22:03.466 23646 23793 I map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:22:03.467 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:animateCamera
04-23 19:22:03.467 23646 23745 I MyPlugin:execute(): Action:animateCamera Data:[{"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}]
04-23 19:22:03.467 23646 23793 D map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:22:03.467 23646 23793 I map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:22:03.596 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.597 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.599 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.670 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.670 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.675 23646 23646 I chromium: [INFO:CONSOLE(137)] "Marker.remove() [object Object]", source: http://localhost/plugins/cordova-plugin-googlemaps/www/Marker.js (137)
04-23 19:22:03.677 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.751 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.752 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.758 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.827 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:03.828 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:03.830 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
04-23 19:22:03.832 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:loadPlugin
04-23 19:22:03.833 23646 23745 I MyPlugin:execute(): Action:loadPlugin Data:["Marker",{"icon":[74,137,243,255],"position":{"lat":43.0741004,"lng":-89.3800802},"animation":"BOUNCE","draggable":false,"zIndex":0,"visible":true,"flat":false,"rotation":0,"opacity":1,"disableAutoPan":false,"noCache":false},313883526718]
04-23 19:22:03.833 23646 23793 D map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:22:03.833 23646 23793 I map_0_111012966863: (debug)action=loadPlugin args[0]=Marker
04-23 19:22:03.833 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:animateCamera
04-23 19:22:03.834 23646 23745 I MyPlugin:execute(): Action:animateCamera Data:[{"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}]
04-23 19:22:03.834 23646 23793 D map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:22:03.834 23646 23793 I map_0_111012966863: (debug)action=animateCamera args[0]={"target":{"lat":43.0741004,"lng":-89.3800802},"tilt":30}
04-23 19:22:04.028 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:resume
04-23 19:22:04.029 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:putHtmlElements
04-23 19:22:04.030 23646 23745 I CordovaLib:CordovaPlugin:execute():  Action:pause
wf9a5m75 commented 3 years ago

Hi, unfortunately, no way to remove the marker during the marker animation, except map.remove (as far as I remember).

pdanysz commented 3 years ago

I found a "good" (enough) workaround to this problem. The WA is to disable animation for all Pins/Markers - then the map have a chance to erase them from the map.

Btw, it will be good to solve that issue permanently in the future. I think there is a lack of some code that will check if animation is playing - if yes, then store Remove request in the queue and run it after animation stops.

wf9a5m75 commented 3 years ago

Yeah, I will do in the next version

pdanysz commented 3 years ago

Yeah, I will do in the next version

Thanks!

I also found one of the root cause for this. It occurs on IOS devices only (for now). I found that if your Marker has an invalid 'icon' it will not be removed from the map, also the setPosition won't work either.

Marker definition:

    this.markers = [{
      color: 'blue',
      lat: 43.0741004,
      lng: -89.3800802,
      icon: {
        url: './nofile',
        size: {
          width: 40,
          height: 40,
        },
      }
    },{
      color: 'yellow',
      lat: 43.0741204,
      lng: -89.3801002
    }];

Logs:

2021-04-26 13:15:54.899682+0200 MyApp[93655:5070644] {"color":"blue","lat":43.0741004,"lng":-89.3800802,"icon":{"url":"./nofile","size":{"width":40,"height":40}}}
2021-04-26 13:15:56.460749+0200 MyApp[93655:5071253] (error)There is no file at '/private/var/folders/8x/9srhsn5n0_392xvc6q7p7_j00000gn/X/EB7FA221-6BC0-5201-AE25-96E501837BE8/d/Wrapper/MyApp.app/www/nofile'.
2021-04-26 13:15:56.462039+0200 MyApp[93655:5070644] [fail] url = ionic://localhost/nofile
2021-04-26 13:15:56.468492+0200 MyApp[93655:5070644] ERROR: map_0_268095487541 Can not load image from 'ionic://localhost/nofile'.

this issue is preventing removing and moving the marker.

Check my source code uploaded to github to reproduce that error

Btw. Should I create a separate issue for this one?