Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] InfoWindow anchor not working #559

Open
dante-blitz opened this issue Oct 2, 2024 · 7 comments
Open

[Bug] InfoWindow anchor not working #559

dante-blitz opened this issue Oct 2, 2024 · 7 comments
Labels
bug Something isn't working

Comments

@dante-blitz
Copy link

Description

I have set an anchor on InfoWindow as per the docs...

        <AdvancedMarker
          position={center}
          onClick={toggleInfoWindow}
          ref={markerRef}
        >
          <Pin
            scale={2}
            background="#ff9200"
            borderColor="#000000"
            glyphColor="#000000"
          />
        </AdvancedMarker>
        {infowindowShown && (
          <InfoWindow anchor={marker} onCloseClick={closeInfoWindow}>
            {infoWindowContent}
          </InfoWindow>
        )}

The InfoWindow is placed directly on top on the Pin (z axis) and completely obscures it. This same code was previously working. Whenevener next.js hot-reloads, it appears to sort itself out and the InfoWindow is shifted up into the correct position.

Steps to Reproduce

Load a page that has a gmap on it.

Environment

"@vis.gl/react-google-maps": "^1.2.0",
"next": "14.2.14",

Logs

No response

@dante-blitz dante-blitz added the bug Something isn't working label Oct 2, 2024
@georgekolasa
Copy link

georgekolasa commented Oct 9, 2024

Having this exact issue as well. Did you figure out any work arounds yet?

Best I've come up with is a manual pixel offset to make the InfoWindow float higher so it doesn't obscure/cover the marker, but if you drag it or place another marker with an InfoWindow near it, then the popup goes even higher (too high).

This feature needs fixing.

@dante-blitz
Copy link
Author

Still have the issue as well. Haven't yet figured out a workaround that works for me. Manual pixel offset break on page reload or hydration when the anchor starts to work.

@mrMetalWood
Copy link
Collaborator

Is this only happening while developing/ hot reloading using NextJs? Or does it somehow also translate to production build?

@georgekolasa
Copy link

georgekolasa commented Oct 10, 2024

I'm not using NextJS personally. Seeing this issue both on CRA and Vite

@dante-blitz
Copy link
Author

@mrMetalWood This is happening in dev and production.

@Tataro
Copy link

Tataro commented Oct 11, 2024

I have the same problem.

"next": "14.2.14",
"@vis.gl/react-google-maps": "^1.3.0"

My workaround is creating a hidden state and delayed setState 500ms so that it would rerender the component, and the InfoWindow would bounce to the correct position.

@mrMetalWood
Copy link
Collaborator

I was able to reproduce the bug and I am working on a fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants