[Bug]info windows for transit directions not styled correctly

[jackiepapers]

Description

When rendering a transit directions route, the info windows for each leg segment have a strange styling.

Steps to Reproduce

Using the example code

Environment

• Library version: @vis.gl/[email protected]
• Google maps version: weekly
• Browser and Version: Chrome 130.0.6723.70
• OS: macOS Sonoma

Logs

No response

[usefulthink]

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

[jackiepapers]

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]

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

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]

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="">

[usefulthink]

That's what I thought. But since we can't change how Google Maps renders these icon overlays, you can check which CSS rules from your application affect that image and remove them.