Markers not draggable when using Google Maps JS v3.46 (current quarterly)

stephent commented 3 years ago

<Marker> elements marked as draggable can no longer be dragged when the version of Google Maps JS is 3.46 (or later). This appears to be a regression in Google Maps somewhere, but whatever has changed breaks react-google-maps-api.

The issues is no observed when loading v3.45 (only available until mid-Feb 2022 when it will be retired).

Your Environment

os: mac/linux node --version 14.x react version 17 webpack version - using either create react app or next.js @babel version - whatever next.js 12.x uses @react-google-maps/api version - 2.7.0 (but I've observed the same behavior with v.3.46 going as far back as v1.13.0)

How does it behave?

Markers that are marked draggable cannot be dragged - instead the entire map moves. See

https://react-google-maps-markers.vercel.app/?v=3.46

How should it behave correctly?

Markers marked draggable should be draggable. See

https://react-google-maps-markers.vercel.app/?v=3.45

basic implementation of incorrect behavior

Couldn't get things working in CSB, so there's a public repo that demonstrates the issue here:

https://github.com/stephent/react-google-maps-markers

Also deployed to Vercel:

Bug: https://react-google-maps-markers.vercel.app/?v=3.46 As expected: https://react-google-maps-markers.vercel.app/?v=3.45

If you get a 500 Internal Server Error on changing the query parameter with the version, just refresh the page and it loads as expected.

stephent commented 3 years ago

OK - so this is traceable back to bad CSS in Google Maps. See https://stackoverflow.com/a/69031991/220287

Here's a separate branch (css-patch) of my reproduction with the patched CSS applied, which functions as expected using 3.46:

https://react-google-maps-markers-9920li49r-stephentrainor.vercel.app/?v=3.46

stephent commented 3 years ago

So, it seems that the underlying issue here is related to using preventGoogleFontsLoading: true. Response from Google engineers:

Upon checking it seems like that "react-google-maps-api" prevents certain Maps JS API CSS styles from being injected correctly, i.e. here. Some of these styles contain necessary details to prevent this bug from happening, especially .gm-style-moc {pointer-events: none}.

This may also cause additional side effects on other Maps components, e.g. Street View "pegman" icon you mentioned above. Please consider this guide for CSS best practices.

I've confirmed that setting preventGoogleFontsLoading: false resolves the issue with markers being undraggable etc.

Reopening.

stephent commented 3 years ago

See https://github.com/stephent/react-google-maps-markers/tree/dont-prevent-google-fonts-loading for demo of workaround, also deployed here:

https://react-google-maps-markers-git-dont-preven-672625-stephentrainor.vercel.app/?v=weekly