google-map-react: onClick event wrong location when map size change

Describe the bug 🐛

When getting the lat & lng from the onClick event on the map component, lat & lng are incorrect if the bounds of the map changes (for e.g. when switching to full screen using the built-in button).

To Reproduce 🔍

Log the lat & lng that onClick give to the callback onClick={console.log}
Unzoom as far as you can so the issue will be more visible
Take a reference point (nothing special, just find a spot on the map that you will click twice in the next steps). I like to take the south spike of Greenland.
Click on your reference point
Switch the map to fullscreen mode
Click on your reference point again
Check the console and you’ll see that both clicks didn’t have the same position (Even if you did click twice at the EXACT same location)

And there you go, now you should see the issue.

Expected behavior 💭

The onClick even should give the same location in both cases described above (normal & fullscreen mode).

Additional context

I’m using the version 2.0.8.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 2
Comments: 18 (2 by maintainers)

Most upvoted comments

Had the same issue - lat/lng returned from onClick are incorrect when using full-screen mode.

Using a click event listener on the map object returned from onGoogleApiLoaded seems the give the correct lat/lng.

onGoogleApiLoaded={({ map, maps }) => {
  map.addListener('click', e => {
    const lat = e.latLng.lat()
    const lng = e.latLng.lng()

    console.log(lat, lng)
  })
}}

gouldie on Sep 18, 2021

Ok, I got it. So the issue I’ve described appears when the map isn’t positioned at the top of the page (e.g. when there’s other elements above it).

Here’s a repro of the bug: https://codesandbox.io/s/quiet-tdd-uvf1u?file=/src/App.js

This may be a duplicated issue, but I can’t find anything related…

AnatoleLucet on Aug 14, 2020