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]info windows for transit directions not styled correctly #593

Open
jackiepapers opened this issue Nov 1, 2024 · 4 comments
Open

[Bug]info windows for transit directions not styled correctly #593

jackiepapers opened this issue Nov 1, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@jackiepapers
Copy link

Description

When rendering a transit directions route, the info windows for each leg segment have a strange styling.
Screenshot 2024-11-01 at 3 06 16 AM

Steps to Reproduce

Using the example code

Environment

  • Library version: @vis.gl/react-google-maps@1.3.0
  • Google maps version: weekly
  • Browser and Version: Chrome 130.0.6723.70
  • OS: macOS Sonoma

Logs

No response

@jackiepapers jackiepapers added the bug Something isn't working label Nov 1, 2024
@usefulthink
Copy link
Collaborator

usefulthink commented Nov 1, 2024

Can you share a link to the example you are referring to?

@jackiepapers
Copy link
Author

I mean the example code provided but just change the mode to TRANSIT
https://github.com/visgl/react-google-maps/tree/main/examples/directions

@usefulthink
Copy link
Collaborator

I did that, and this is what it looks like for me:

image

So I can't see the problem you’re seeing there. You could check with the devtools to see if there is any CSS from the site interfering with those info-windows. However, besides that there isn't a lot we can do about it, since all of the rendering is happening inside the DirectionsRenderer.\

Maybe we need to open an issue in the Google Maps Issue Tracker about this.

@jackiepapers
Copy link
Author

I am using it in Next js. It seems there's an image that's styled with absolute and top: 19px. If I remove the top: 19px it looks right.
<img alt="" src="https://maps.gstatic.com/mapfiles/tiph.png" draggable="false" style="user-select: none; border: 0px; padding: 0px; margin: 0px; position: absolute; right: -8px; top: 19px; width: 15px; height: 9px;" class="">

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

2 participants