Skip to content
Advertisement

@react-google-maps/api onClick not working

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';

Advertisement

Answer

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.

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement