[google-maps] Draggable Marker Bug on Android, setOnMarkerDragEndListener is never called (none of the drag events are called), works well on iOS & Web

[FlossyWeb]

Bug Report

Plugin(s)

"@capacitor/google-maps": "^6.0.1"

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 6.2.0
  @capacitor/core: 6.2.0
  @capacitor/android: 6.2.0
  @capacitor/ios: 6.2.0

Installed Dependencies:

  @capacitor/cli: 6.2.0
  @capacitor/core: 6.2.0
  @capacitor/android: 6.2.0
  @capacitor/ios: 6.2.0

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

Android (on all tested devices).

Current Behavior

When dragging any draggable marker, the drag events are never called especially setOnMarkerDragEndListener which is the most useful.
iOS & Web works perfectly as expected ☺️
When connecting an android device to my machine for debug purpose I can't see no errors in the console and it never gets in none of the drag events.

Expected Behavior

On iOS & Web platforms the marker is nicely dragged to a new spot then setOnMarkerDragEndListener is fired and helps with getting back marker's new latitude & longitude for instance.

Code Reproduction

// Markers are added to the map that way :
				const step = App.settings.customPathMarkers.length + 1
				const newMarker = {
					coordinate: { lng: data.longitude, lat: data.latitude },
					iconUrl: `${App.settings.serverAppUrl}/online_assets/icons/geoPinMarker.png`,
					iconSize: { width: 64, height: 64 },
					iconAnchor: { x: 32, y: 64 },
					draggable: true,
					opacity: 0.8,
					zIndex: 200,
					title: '#' + step,
					snippet: data.latitude + ', ' + data.longitude
				}
				const newMarkerId = await App.settings.homeMap.addMarker(newMarker)
				newMarker.markerId = newMarkerId
				App.settings.customPathMarkers.push(newMarker)
// And here is the drag end event...
	setOnMarkerDragEndListener: async () => {
		App.settings.homeMap.setOnMarkerDragEndListener(async (data) => {
                        // Android never gets there and the marker gets back to it's original position !
			console.log('setOnMarkerDragEndListener', data) // { "mapId": "home-map", "markerId": "8119", "latitude": 43.331135153612585, "longitude": 5.377732682633138,"title": "#3", "snippet": ""}
			if (App.settings.creating) {
				const thisMarker = App.settings.customPathMarkers.find(marker => marker.markerId == data.markerId)
				thisMarker.coordinate.lat = data.latitude
				thisMarker.coordinate.lng = data.longitude
				App.drawItCreation()
			}
			if (App.settings.relocating) {
				App.settings.relocateMarker.coordinate.lat = data.latitude
				App.settings.relocateMarker.coordinate.lng = data.longitude
			}
		})
	},

Other Technical Details

Additional Context

[Ionitron]

This issue needs more information before it can be addressed.
In particular, the reporter needs to provide a minimal sample app that demonstrates the issue.
If no sample app is provided within 15 days, the issue will be closed.

Please see the Contributing Guide for how to create a Sample App.

Thanks!
Ionitron 💙

[FlossyWeb]

Hi There,

Finally after a long investigation I found out what the problem really is and I worked around it.
As a matter of fact Markers' Drag Event Listeners are not compatible with Marker Clustering on Android (and it seemed to crash the App sometimes on iOS).

So one solution is to call disableClustering before you let users drag a marker or not to call enableClustering at all.
But if you find yourself in my case, where I need to call enableClustering because I display a lot of markers and you can disable it when users need to drag some markers, you'll find out that disableClustering does not restore these dragging events on Android if you previously enabled clustering.

In fact this issue is kinda related to this one => ionic-team/capacitor-plugins#1227
Except that I had to add this line to disableClustering in CapacitorGoogleMap.kt in order to make it work :
googleMap?.setOnMarkerDragListener(this@CapacitorGoogleMap)

So the complete function becomes :
` fun disableClustering(callback: (error: GoogleMapsError?) -> Unit) {
try {
googleMap ?: throw GoogleMapNotAvailable()

        CoroutineScope(Dispatchers.Main).launch {
            clusterManager?.clearItems()
            clusterManager?.cluster()
            clusterManager = null

            googleMap?.setOnMarkerClickListener(this@CapacitorGoogleMap)
            googleMap?.setOnMarkerDragListener(this@CapacitorGoogleMap)

            // add existing markers back to the map
            if (markers.isNotEmpty()) {
                for ((_, marker) in markers) {
                    val markerOptions: Deferred<MarkerOptions> =
                            CoroutineScope(Dispatchers.IO).async {
                                this@CapacitorGoogleMap.buildMarker(marker)
                            }
                    val googleMapMarker = googleMap?.addMarker(markerOptions.await())
                    marker.googleMapMarker = googleMapMarker
                }
            }

            callback(null)
        }
    } catch (e: GoogleMapsError) {
        callback(e)
    }
}`

After this mod these dragging events fire like they're supposed to 👍