9

I'm using @react-google-maps/api library and everything in package has been working correctly.
Now I just noticed that component's onClick event has lost its functionality and in my website the functions attached to it are not working. I don't think I have changed any code related to onClick functioanlity.

This is easily seen as I have also used with clickable markers inside and when hovering mouse over those markers it remains as "drag-hand" and doesn't change to "pointing-hand".
Also I have marker with title prop. Now if I hover mouse over it the title won't appear.

I tried to test this by normal console loggin, but console remains empty.
Following picture shows the basic component with onClick event and that onClick event does not function.

enter image description here

I might be missing something but this just appeared out of nowhere to functioning application and I'm puzzled about this.

I'm using: "@react-google-maps/api": "^2.2.0",
and imports are basic:

import {
  GoogleMap,
  Marker,
  Polygon,
  useJsApiLoader,
} from '@react-google-maps/api';
Hessuew
  • 583
  • 1
  • 4
  • 23

1 Answers1

13

It seems Google has broken something on their end. I'm experiencing the exact same problem in our application. There's an invisible overlay div floating around that blocks access to the content underneath. I temporarily fixed it in CSS by unsetting the height of the mysterious overlay div.

.gm-style-moc {
    height: unset !important;
}

I guess Google will also fix this on their end soon.

Tom Brouws
  • 154
  • 1
  • 3
  • Oh that explains it. And yes this fixes the issue. Did you dig through the rendered html to find this weird overlay div? – Hessuew Sep 03 '21 at 05:52
  • 1
    @Hessuew Yes, that is basically what I did. – Tom Brouws Sep 03 '21 at 13:14
  • 1
    Wish I'd found this back on Sep 2 when my app mysteriously broke too! Thank you. Documented here also https://issuetracker.google.com/issues/198562471 – stephent Nov 18 '21 at 00:43
  • 1
    I suspect the same Google release (3.46.3) is responsible for the blank StreetView control with 'Pegman' nowhere to be seen. This rule fixes that too: ```.gm-svpc > div { height: 100%; width: 100%; }``` – stephent Nov 18 '21 at 00:49
  • It looks like this is actually related to the option `preventGoogleFontsLoading` in `@react-google-maps/api`, and setting this to false is also a potential fix. See: https://github.com/JustFly1984/react-google-maps-api/issues/2906 – Chris Dueck Apr 22 '22 at 11:36