Jumping markers, jumping to next or nearest marker in react native maps

Viewed 1293

I have been playing around with react native maps and came across a problem to which i couldn't find a solution.

I have set up few custom markers at same location (same lat and lon). When clicked on it, i noticed a weird action which is not acceptable. I noticed that the callout (title and description) of top marker (as said multiple markers on same locations) pops over, waits for a moment, closes and again opens the callout of next marker.

I have also tried by placing two markers with some distance between each of them, zoom out until the markers are pretty near to each other and clicked on it. It does the same weird action.

Can you provide a solution to this?

Image

1 Answers

It is too bad, this has not yet been fixed.

I have the same issue. iOS only.

Interestingly, the onPress(…) event is fired one single time for the marker I have really clicked on. But the onSelect(…) event is fired for both the marker I clicked on to open the callout + the neighbouring marker. The onSelect sets the callout.

I did some research and it seems that the error was introduced here (as mentioned by leonardogutierrezh in a comment to the PR): https://github.com/react-native-community/react-native-maps/pull/1079

There is a strange workaround here: https://github.com/react-native-community/react-native-maps/issues/1353 (set pointerEvents="auto", which worked for me, but makes appearance of callout slow.).

Two open issues exist in github.com/react-native-community: here and here.

The workaround that worked for me was to add

<Marker>
…
pointerEvents="auto"
</Marker>

Now, the callout appears after a delay of ~400ms, but hey, a lot better than before.

Related