Open stephent opened 2 years ago
See also #2881 and https://issuetracker.google.com/issues/198562471
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
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.
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
This also breaks onClick
for me. Stopping using preventGoogleFontsLoading
fixes it.
Is there any update on this? I don't want to import google maps fonts so I don't want to set false the rule. I also need to use click events and some markers.
preventGoogleFontsLoading: false this also worked for me.
<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.