react-native-maps: Overlapping markers being pressed will trigger onSelect multiple times

Hi guys, is there an update on this issue?

Have you tried: pointerEvents="auto”

In the Marker? That fixed it for me.

Still having this issue in 2023… Setting the pointerEvents to auto did not work in my case. Anyone knows of another workaround?

Hmm that pointerEvents="auto" flag didn’t fix it for me. Would really love to see a fix for this.

This issue is still a problem and should be reopened.

@jordymeow’s solution works for me, but indeed makes it all less snappy; it takes some time for the callout to appear.

Feb 21 and I’m facing the same behavior.

Please don’t close this issue. Up.

Same issue. Any updates or news?

This is currently biting me as well. This didn’t happen a few versions ago but while using the new version of expo tapping on markers that are close to each other is an exercise in frustration.

Focus jumps back and forth between the markers that are in close proximity, making it quite hard to get the callout you want.

Hey @Marswang92, I added it because onSelect wasn’t being called when tapping on a marker’s subview.

I just tested it again in RN 0.44, and I’m experiencing something similar to you guys. What’s weird is that the callout jumps to a nearby marker, but the onPress event of that second marker is not fired.

In my case, pointerEvents="auto” worked but it’s not as snappy without it, there is maybe half a second (or actually, almost a second) between the press and the display of the label. Would be really awesome to see this fixed rather than looking for workarounds.

[Off-topic] When marker spacing is tight, for example 5 meters, user cannot zoom in tight enough to select individual markers with a finger tip. Especially on iOS using Apple Maps.

How can you scatter markers to spread apart and enable individual selection of densely packed or over-lapping markers? Is the technique in below image called clustering?

Or is clustering combining markers into one?

Are there solutions to implement marker expansion in react-native-maps ?

This happens because the method _handleTap in the objc class AIRMapMarker calls [marker.map selectAnnotation:marker animated:NO], which triggers showCalloutView again (sometimes on a different marker if they are too close, I’m guessing that’s just how MKMapView works). The call to selectAnnotation should be removed in my opinion.

pointerEvents="auto" seems to make you unable to rely on onPress which are now randomly called… Not a solid workaround.

If you don’t use onSelect prop, you should definitely remove what is added in this PR: https://github.com/react-native-maps/react-native-maps/pull/1079 Using patch-package make this easy!

I ended up with this in

patches/react-native-maps+0.26.1.patch

diff --git a/node_modules/react-native-maps/lib/ios/AirMaps/AIRMapMarker.m b/node_modules/react-native-maps/lib/ios/AirMaps/AIRMapMarker.m
index d90f89c..6f36b28 100644
--- a/node_modules/react-native-maps/lib/ios/AirMaps/AIRMapMarker.m
+++ b/node_modules/react-native-maps/lib/ios/AirMaps/AIRMapMarker.m
@@ -259,7 +259,10 @@ - (void)_handleTap:(UITapGestureRecognizer *)recognizer {
     if (marker.onPress) marker.onPress(event);
     if (marker.map.onMarkerPress) marker.map.onMarkerPress(event);
     
-    [marker.map selectAnnotation:marker animated:NO];
+    // https://github.com/react-native-maps/react-native-maps/issues/1353#issuecomment-306323721
+    // disable as we don't use onSelect
+    // this is to prevent the double callout bug
+    // [marker.map selectAnnotation:marker animated:NO];
 }
 
 - (void)hideCalloutView

Would this be fixed by setting AIRMapMarker.m:189 to tapGestureRecognizer.cancelsTouchesInView = YES; ? It’s currently NO so the map marker touches propagate.

Did anyone figure out a solution or workaround to this yet?